javascript - 更改文件更改时的标签文本(自定义表单上传按钮)

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;
}

现在它按照我的设计进行解析 - 带有一个具有某些样式的按钮外观图标和按钮内的“选择文件”副本，以及我制作的标题“上传照片” ' 当前的问题是，现在我已经把这个写下来了，我已经丢失了上传时“文件名”最初的显示方式——所以目前无法判断它是否上传成功，我会想要将背景颜色更改为绿色或/并将“选择文件”文本更改为文件名？ - 有什么想法吗？

Answer 1

我通过以下内容完成了这一点；如果其他人遇到类似情况:

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

这很棒 - 但仍然不显示实际的“文件名”。