使用FileReader時，chrome中的狀態錯誤無效

Question

我只是嘗試使用FileReader來顯示圖像文件，但是當我嘗試使用多個圖像時，我得到以下“InvalidStateError：DOM Exception 11”。 然而，在Firefox中，它工作正常。

這是我的代碼

    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

不幸的是不起作用。 正如janje所提到的，每次迭代都需要創建一個新的FileReader。 還記得在綁定事件處理程序時創建一個閉包，因為JavaScript 中的 “在循環中創建函數 ”問題。

Eric Bidelman的帖子是一個相當不錯的來源：

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

Answer 2

您必須使用readAsDataURL為每次迭代創建一個新的FileReader（以及一個用於存儲它的新變量）。