Как загрузить несколько файлов через input?

Question

[toster23]

один файл загрузить получается

но несколько не получается - картинка отображается только для последнего элемента в массиве

<input type="file" id="input" multiple='multiple' accept="image" >

input.onchange = function()
	{	
		var массив = this.files

		for (var x=0; x< массив.length; x++)
		{
			var file = массив[x]

			var картинка = document.createElement('img')
			// и добавляем элемент в документ

			var reader = new FileReader()
			reader.onloadend = function() 
			{  
				картинка.src = reader.result 
			}                     
			reader.readAsDataURL(file)
		}
	}

Answer 1

[5465]

Проблема заключается в том, что вы создаете только один элемент img, и затем перезаписываете его каждый раз в цикле. Чтобы отобразить все загруженные изображения, вам нужно создавать новый элемент img для каждого файла.

Вот пример исправленного кода:

<input type="file" id="input" multiple='multiple' accept="image" >

<div id="images"></div>

var input = document.getElementById('input');
var imagesDiv = document.getElementById('images');

input.onchange = function() {	
  var filesArray = this.files;

  for (var i = 0; i < filesArray.length; i++) {
    var file = filesArray[i];
    var image = document.createElement('img');
    
    var reader = new FileReader();
    reader.onload = (function(img) {
      return function(e) {
        img.src = e.target.result;
      };
    })(image);
    reader.readAsDataURL(file);
    
    imagesDiv.appendChild(image);
  }
};

Здесь мы создаем новый элемент img для каждого файла в цикле, а затем добавляем его внутрь элемента div с id "images". Обратите внимание на использование замыкания, чтобы передать элемент img в функцию onload объекта FileReader. Это необходимо, чтобы изображения отображались в правильном порядке.

Comments

[toster23]

спс

я сделал так:

input.onchange = function()
	{	
		var массив = this.files

		for (var x=0; x< массив.length; x++)
		{
			var file = массив_файлов[x]

			(function(file){

			var картинка = document.createElement('img')
			// и добавляем элемент в документ

			var reader = new FileReader()
			reader.onloadend = function() 
			{  
				картинка.src = reader.result 
			}                     
			reader.readAsDataURL(file)

			})(file)
		}
	}