清除“选择文件”按钮的文本

Question

我有一张上传多张图片的表单：

<form action="uploadImages.php" method="post" enctype="multipart/form-data" id="UploadForm">
    <input type="file" id="imageFiles" name="Images[]"  multiple="multiple" help_token="upload_token" size=20 />  
    <input type="button"  id="submitImages" help_token="upload_token" value="Upload" />
    <img id="loadGif" src="images/ajax-loader.gif" alt="load gif" />
 </form>

上面我刚刚选择了5个文件，当我选择上传时，他们将被上传。如果我之后选择另一组文件，那么＆＃34; 5文件＆＃34;在我实际选择了新的文件集之前，它仍会显示。我一旦选择＆＃34;选择文件＆＃34;我希望此文本消失。但我似乎无法掌握该文本。它似乎完全由浏览器控制。有没有办法我可以在＆＃34;选择文件＆＃34;按钮（输入＃imageFiles）被选中了？

感谢。

Answer 1

尝试

HTML

<!-- add `value` attribute to `file` input -->
<input type="file" id="imageFiles" name="Images[]"  multiple="multiple" help_token="upload_token" size="20" value="" />
 <!-- adjust `button` type to `submit` -->
<input type="submit"  id="submitImages" help_token="upload_token" value="Upload" />

JS

$("#UploadForm").on("change submit", function(e) {
  e.preventDefault();
  e.stopPropagation();
  if (e.target.files) {
    console.log(e.target.files) // files selected
  } 
  else {
    var data = {};
    var files = $(e.target).find("#imageFiles")[0].files;
    [].slice.call(files).forEach(function(val, i) {
        data[val.name] = val // files object
    });
    var request = $.ajax({
        url:$(e.target).attr("action"),
        data:{json:JSON.stringify(data)}, // files as `json`
        type: $(e.target).attr("method"),
        dataType:"json",
        context:$(e.target).find("#imageFiles")
    })
    .then(function(data) {
        console.log(data); // files
        $(this).val("").change(); // clear `value`
     }, function(jqxhr, textStatus, error) {
           console.log(textStatus, error);
           $(this).val("").change();
     })
   }
})

jsfiddle http://jsfiddle.net/0dq11b8o/