從FileReader（）得到結果

我有多個文件的上傳表單。上傳過程進行得很順利。該問題與FileReader（）結果有關。在上傳多個文件（圖片）時，我需要在上傳完成時創建相應的大拇指。

files = e.target.files; 

for (var i = 0; i < files.length; i++) { 

    //ajax request goes here 

    var reader = new FileReader(); 
    reader.onload = (function (e) { 

     var img = document.createElement('img'); 
     img.file = e; 
     img.className = 'thumbs_'; 
     img.src = e.target.result; 

     //Every image has a wrapper div with the id 'nDv0','nDv1','nDv2' etc.     

     document.getElementById('nDv' + i).appendChild(img); 
    })(e); 

    reader.readAsDataURL(files[i]); 

    //request sent 

}

如果我刪除匿名函數週圍的閉包，當for循環退出時，我的值將是任何值。例如，如果有3個文件，我的值將是3，結果將被追加到最後一個包裝div並顯示圖像。

隨着閉包，每個圖像都會附加到相應的div上，但由於返回的結果未定義，圖像將不會顯示。

那麼，我怎樣才能將每個拇指追加到其對應的div？

來源

2014-01-30 user1190478

你有logic error：

reader.onload = (function (e) { 
    //onload code 
    //inside function e is event from outside 
})(e);//e is event from upper code

而且i將等於files.length因爲onload處理程序是異步。所以你必須改變你的onload處理程序：

reader.onload = function (index) { 
    var img = document.createElement('img'); 
    img.className = 'thumbs_';//it's right className? 
    img.src = this.result;//result is dataURL     
    document.getElementById('nDv' + index).appendChild(img); 
}.bind(reader, i);

來源

2014-01-30 11:21:50 Pinal

感謝的清除了這一點。我試過刪除閉包，但是這樣做時，我得到了for循環退出時的最後一個值。順便說一句，我已經刪除了img.file行 – user1190478

是的，我將等於files.length，因爲onload處理程序是異步的。從我的編輯答案再次嘗試onload處理程序。 – Pinal

它可以工作，但img.src現在爲空。沒有圖像顯示。 – user1190478

從FileReader（）得到結果

回答

相關問題