简体   繁体   English

上载文件的内容更改后,在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 not getting fired on second time when the same file still selected with IE11 but the contents of file has changed, it's getting fired all the time for FireFox,Chrome. 当仍然使用IE11选择相同文件但文件内容已更改时, FileReader onload不会在第二次被激发,而FireFox,Chrome一直在被激发。

Operation Details 操作细节

  1. On First Click, its all okay for all browsers(but IE sometime still missing some words from file). 首次单击时,对于所有浏览器都可以(但IE有时仍缺少文件中的某些单词)。
  2. After that I changed the contents of the file. 之后,我更改了文件的内容。
  3. And then I click second attempt to btnDownload , Firefox and Chrome still reading the updated contents. 然后单击第二次尝试btnDownload ,Firefox和Chrome仍在读取更新的内容。 BUT IE DOES NOT WORK! 但是IE无法正常工作!

.html .html

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

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

myjavascript.js 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.
}

Please help me with following issue. 请帮助我解决以下问题。

  1. How can I get to the line in reader.onload method although file contents are changed. 尽管文件内容已更改,但如何到达reader.onload方法中的行。 alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)"); .

Replace this 取代这个

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

with

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

I hope this is helpful. 我希望这是有帮助的。 I was facing the same problem and I used this method and it worked 我遇到了同样的问题,因此我使用了这种方法,并且有效

Example of working FileReader: 工作的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>

For more on FileReader check this document out : Link 有关FileReader的更多信息,请查看此文档: 链接

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM