5

我只是尝试使用 FileReader 来显示图像文件,但是当我尝试使用超过 1 个图像时,我得到以下“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)
4

2 回答 2

5

不幸的是不起作用。正如 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);
    }
  }
于 2013-07-29T20:34:57.997 回答
1

您必须使用 readAsDataURL 为每次迭代创建一个新的 FileReader(和一个新的变量来存储它)。

于 2013-07-11T13:51:49.207 回答