5

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)
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 に答える