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

Question

我只是想添加一个 'state' 更改，以便用户可以判断他们的文件是否已成功上传；在自定义之前，默认浏览器按钮显示 'file name'（文件上传后）不知何故，自从自定义以满足设计需求后，它就丢失了。

<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”设为当前现在的问题是我已经记下了这个，我已经忘记了 'file name' 最初是如何在上传时出现的——所以目前没有办法判断它是否上传成功我想要背景颜色变为绿色或 / 并且 'select a file' 文本变为文件名？ -- 有什么想法吗？

Answer 1

我用下面的方法完成了这个；如果其他人遇到类似情况：

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

很棒 -- 但是仍然没有显示实际的 'file name'。

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

change label text on file change (custom form upload button)

javascript

ajax

jquery

asp-classic