更改上传文件的内容后,在 IE 11 中第二次尝试不会触发 FileReader onload

FileReader onload not getting fired for second attempt in IE 11 after contents of the uploaded file is changed

FileReader onload 当使用 IE11 仍然选择同一个文件但文件内容已更改时,第二次没有被触发,FireFox 一直被触发,Chrome.

操作详情

  1. 首次点击时,所有浏览器都可以(但 IE 有时仍然会丢失文件中的一些单词)。
  2. 之后我更改了文件的内容。
  3. 然后我点击第二次尝试 btnDownload,Firefox 和 Chrome 仍在阅读更新的内容。但是 IE 不工作!

.html

<input type="file" id="fileSelect" style="" accept=".csv">

<a type="button"  class="btn" id="btnDownload" onclick="csvDownload()" 
download>  CSV DOWNLOAD  </a>

myjavascript.js

var fileInput = document.getElementById("fileSelect"); //<input type="file" id="fileSelect">
var result = "";
readFile = function() {
changeAPInfoName();
if (!isFileSupported()) {
    console.log('The browser does not support the API.');

} else {
    if (fileInput.files.length > 0) {
        var reader = new FileReader();
        reader.onload = function() {
           result = reader.result;

           alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");            

           document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
      }

    reader.readAsText(fileInput.files[0]);

    reader.onerror = function() {
         console.log('The file cannot be read.'+fileInput.files[0].fileName);
      };
}

// EVENT FOR DOWNLOAD BUTTON!!!!
function csvDownload(){
     readFile();  

     // using ajax to sent info from files and get download file.
}

请帮我解决以下问题。

  1. 尽管文件内容已更改,我如何才能到达 reader.onload 方法中的行。 alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");.

替换此

reader.onload = function() {
       result = reader.result;

       alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");            

       document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
  }

reader.addEventListener("load",function(){
result = reader.result;

           alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");            

           document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
});

希望对您有所帮助。我遇到了同样的问题,我使用了这个方法并且有效

FileReader 工作示例:

<html>

<head>



    <script>


        function read(){
            //Select the element containing file
              var file =document.querySelector('input[type=file]').files[0];
        //create a FileReader
        reader = new FileReader();
        //add a listener
        reader.addEventListener('load',function(){

            alert(reader.result);

        },false);

        if(file){
             //ReadFile
            reader.readAsDataURL(file);//You can read it in many other forms

        }
        }

    </script>



    </head>

    <body>

    <input type="file" name="myFile" id="myFile"  onchange="read()">




    </body>

</html>

有关 FileReader 的更多信息,请查看此文档:Link