Как я могу отобразить несколько изображений после загрузки нескольких одновременно? 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

Это heppens becouse из variable hoisting in javascript

компилятор переписывает код так, это будет выглядеть так:

$("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; 
} 

читателя и переменная IMG всегда равна последней (даже тот, который был инициализирован первым)

Вы, вероятно, следует использовать функцию создателя, определенный перед циклом так:

$("input").change(function(e) { 
function initOnReaderLoaded(img, reader){ 
    return function(){ 
     img.src = reader.result; 
    } 
} 
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 = initOnReaderLoaded(img, reader); 
    reader.readAsDataURL(file); 
    div.appendChild(img); 
    //$("input").after(div); 
    var container = document.getElementById("images-container"); 
    container.appendChild(div); 
} }); 

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