Почему в момент вызова не доступен елемент?

Question

[Hyubert]

Всем привет, возникла проблема с формой загрузки нескольких изображеный, точнее с превю загруженых изображеный. Интересует почему при переборе и присваивани в цикле, нет доступа к свойсту result от прототипа FileReader. Может немного запутано написал, но посмотрите код и поймете.

codepen для удобства

function readURL3(input) { // this input element

	var reader = [];

	if (input.files.length <= 5) {
		
		for(var i = 0; i < input.files.length; i++) {
			reader[i] = new FileReader();
			reader[i].readAsDataURL(input.files[i]);
				
			console.log(reader[i]); // is array element
			console.log(reader[i].result); // empty string

			(document.querySelectorAll('.blah3'))[i].setAttribute('src', reader[i].result);

		}

		console.log(reader) // result is work

		document.getElementById('fileUpload2').querySelector('div').innerHTML = 'Загружено ' + input.files.length + ' файла'; // set name img to div
	} else {
			document.getElementById('fileUpload2').querySelector('div').innerHTML = 'Можно загружать только 5 файлов'; // set name img to div

	}
}

UPD. при последнем console.log(); его выдно через консоль
console.log(reader) // result is work

Answer 1

[Aves]

Чтение файла операция асинхронная, нужно слушать событие load.

for(let i = 0; i < input.files.length; i++) {
  const r = reader[i] = new FileReader();
  r.addEventListener('load', () => {
    document.querySelectorAll('.blah3')[i].setAttribute('src', r.result);
  });
  r.readAsDataURL(input.files[i]);
}

https://codepen.io/anon/pen/WjxEqO?editors=0011

Comments

[Hyubert]

Ваш пример работает нормально, а я пишу Вот так и ничего не работает

for(var i = 0; i < input.files.length; i++) {
			var r = reader[i] = new FileReader();

			r.addEventListener('load', function () {
				(document.querySelectorAll('.blah3'))[i].setAttribute('src', r.result);
			}, false);

			r.readAsDataURL(input.files[i]);

		}

[Hyubert]

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

for(let i = 0; i < input.files.length; i++) {
      const r = reader[i] = new FileReader();

      r.addEventListener('load', function () {
        (document.querySelectorAll('.blah3'))[i].setAttribute('src', r.result);
      }, false);

      r.readAsDataURL(input.files[i]);

    }

[Aves]

Hyubert: https://learn.javascript.ru/let-const#let пункт 3
с var можно сделать так - https://codepen.io/anon/pen/rmLGzR?editors=0011

[Hyubert]

Aves: спасибо