Question

我只想在某种程度上添加“状态”更改，以便用户可以判断他们的文件是否已成功上传;在自定义之前，默认的浏览器按钮显示“文件名”（一旦文件上传），自定制以满足设计需求以来，它会丢失。

<span class="caption_upload">Upload a photo:</span>

<label class="filebutton">
Select File <span><input name="Text1" type="file" required></span>
</label>

所以，我设法创建了一个带有一些CSS黑客攻击的自定义文件上传按钮（上面的html，下面的CSS）

label.filebutton {
  width: 120px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  text-align: center;
  line-height: 1.9;
  float: right;
  margin-top: -9px;
  color: #999;
}
label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}
.caption_upload {
  margin-left: -65px;
  position: absolute;
  margin-top: 139px;
  color: #3f2a27;
}

现在它解析为我的设计 - 带有按钮的图标带有一些样式，按钮内有一个“select file”副本，旁边有一个标题我做了'Upload a photo'当前的问题是现在我已经失去了这个，我已经失去了上传后'文件名'的最初状态 - 所以目前无法判断它是否已成功上传我希望将背景颜色更改为绿色或/和“选择文件”文本是否更改为文件名？ - 任何想法？

Answer 1

我用以下完成了这个;如果有其他人遇到类似的情况：

   $("#upload").change(function() {
       $("label.filebutton").html("File Selected");
       $('label.filebutton').css({
       'color' : '#fff',
       'background' : 'green'
    });
  });

很棒 - 但是仍然没有显示实际的文件名＆＃39;。

更改文件更改时的标签文本（自定义表单上传按钮）

1 个答案: