Циклическое прохождение через FileReader onload Jquery

Мне нужно просмотреть все мои входные данные, которые являются файлом типа, и загрузить его в качестве предварительного просмотра. Мой код до сих пор:

var _i = 0;
function setImagesToPreview(){
  $("form#form-generate-mail input[type=file]").each(function(i){
    var input = $(this);
    _i = i;

    if (input.context['files'] && input.context['files'][0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $(document).find("div.modal-preview-mail img.image_placeholder:nth-child("+_i+")").attr('src', e.target.result);
      }

      reader.readAsDataURL(input.context['files'][0]);
    }
  });
}

Следующий код работает, но только для 1 ввода. Причина этого в том, что переменная ‘i’, которая действует как счетчик, когда она достигает читателя.при загрузке переменной устанавливается конечное значение.

пример: 5 входов, счетчик’ i ‘ увеличивается на 1 каждый раз, от 0 до 4, но как только он попадает в считыватель.onload, он всегда отображает 4 и никогда не увеличивается.

Любая помощь будет полезной, спасибо заранее.

2 ответа

  1. Просто оберните внутренний код с помощью IIFE . Таким образом, вы создаете новый контекст выполнения и текущее состояние iсохраняется в нем.

    Краткий пример:

    for (var i = 0; i < 5; i++) {
        (function(i) {
            setTimeout(function() { console.log(i); }, 50 * i);
        })(i);
    }
    
  2. Я думаю, что вам нужно создать такой контекст .

      reader.onload = (function(index){
            return function (e) {
                 $(document).find("div.modal-preview-mailimg.image_placeholder:nth-child("+index+")").attr('src', e.target.result);
          };
    })(_i);