FileReader를 사용할 때 크롬의 상태 오류가 잘못되었습니다.

Question

단순히 FileReader를 사용하여 이미지 파일을 표시하려하지만 두 개 이상의 이미지를 사용하려고하면 다음과 같은 "InvalidStateError : DOM Exception 11"이 표시됩니다. 그러나 파이어 폭스에서는 잘 작동합니다.

다음은 readAsDataURL를 사용하여 모든 반복에 대한 신규 FileReader (그것을에서 저장할 수있는 새로운 변수)를 생성해야 내 코드

function addImages(images) 
      { 
       var reader=new FileReader() 

       reader.onload=function() 
       { 
        $("#images").append('<img src="'+this.result+'"/><br/>') 
       } 

       for(var count=0;count<images.length;count++) 
       { 
        reader.readAsDataURL(images[count]) 
       } 
      } 

      function uploadImagesToBrowser(e) 
      { 
       addImages(e.target.files) 
      } 
$("#imagefiles").on("change",uploadImagesToBrowser) 

Answer 1

입니다.

Answer 2

불행히도 작동하지 않습니다. janje에서 언급했듯이 반복마다 새로운 FileReader를 만들어야합니다. 또한 자바 스크립트에서 "creating functions in a loop"문제로 인해 이벤트 핸들러를 바인딩 할 때 클로저를 만드는 것을 잊지 마십시오.

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
     return function(e) { 
      // Render thumbnail. 
     }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
    } 

:

Eric Bidelman's post 오히려 좋은 소스입니다