一度に複数の画像をアップロードした後で、複数の画像を表示するにはどうすればよいですか？ JS

Question

私はGoogleのイメージの説明を入れたい画像オーガナイザーに取り組んでいます。現時点では、すべての画像をサーバーに一度にアップロードして表示しようとしていますが、何らかの理由で最後の選択肢しか表示されません。

HTML

<input type='file' accept='image/*' multiple onchange="readURL(this);"/> 
<div id="images-container"></div> 
<label><strong>(Image will display above)</strong></label> 

CSS

#blah { 
    display: block; 
} 

img { 
    width:100%; 
} 
.picContainer { 
    border: 1px dashed black; 
    margin: 10px; 
    padding: 10px; 
    width: 100px; 
    display: inline-block 
} 

JS

$("input").change(function(e) { 

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

    var file = e.originalEvent.srcElement.files[i]; 

    var div = document.createElement("div"); 
    var img = document.createElement("img"); 
    div.className = "picContainer"; 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     img.src = reader.result; 
    } 
    reader.readAsDataURL(file); 
    div.appendChild(img); 
    //$("input").after(div); 
    var container = document.getElementById("images-container"); 
    container.appendChild(div); 
} }); 

Answer 1

それはそのようになりますので、コンパイラは、コードを書き換えvariable hoisting in javascript

のbecouseこれはheppens：それがあなたのために何を意味するのか

$("input").change(function(e) { 
var i, file, div, img, container; 
for (i = 0; i < e.originalEvent.srcElement.files.length; i++) { 

    file = e.originalEvent.srcElement.files[i]; 

    div = document.createElement("div"); 
    img = document.createElement("img"); 
    div.className = "picContainer"; 
    reader = new FileReader(); 
    reader.onloadend = function() { 
     img.src = reader.result; 
    } 
    reader.readAsDataURL(file); 
    div.appendChild(img); 
    //$("input").after(div); 
    container = document.getElementById("images-container"); 
    container.appendChild(div); 
} }); 

は、あるその機能

reader.onloadend = function() { 
    img.src = reader.result; 
} 

におけるリーダーと（最初に初期化されたとしても1で）最後の1

に常に等しいのimg変数

このようなループの前に定義された関数作成者を使用するべきでしょう。

Answer 2

読者の中にあなたのimg要素を作成してください。ここ

フィドル：

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++) { 

    // Only process image files. 
    if (!f.type.match('image.*')) { 
    continue; 
    } 

    var reader = new FileReader(); 

    // Closure to capture the file information. 
    reader.onload = (function(theFile) { 
    return function(e) { 
     // Render thumbnail. 
     var span = document.createElement('span'); 
     span.innerHTML = ['<img class="thumb" src="', e.target.result, 
         '" title="', escape(theFile.name), '"/>'].join(''); 
     document.getElementById('list').insertBefore(span, null); 
    }; 
    })(f); 

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

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Fiddle