получить результат от FileReader()

Question

У меня есть следующая проблема.

У меня есть форма для загрузки для нескольких файлов. Процесс загрузки идет хорошо. Проблема связана с результатом FileReader(). Когда я загружаю несколько файлов (изображений), мне нужно создать соответствующие превью, когда загрузка будет закончена.

files = e.target.files; 

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

    //ajax request goes here 

    var reader = new FileReader(); 
    reader.onload = (function (e) { 

     var img = document.createElement('img'); 
     img.file = e; 
     img.className = 'thumbs_'; 
     img.src = e.target.result; 

     //Every image has a wrapper div with the id 'nDv0','nDv1','nDv2' etc.     

     document.getElementById('nDv' + i).appendChild(img); 
    })(e); 

    reader.readAsDataURL(files[i]); 

    //request sent 

} 

Если я удаляю замыкания вокруг анонимной функции, значение i будет любым, когда цикл for будет завершен. Например, если есть 3 файла, значение i будет равно 3, и результаты будут добавлены к последней обертке div и будут отображаться изображения.

С закрытием каждое изображение добавляется к соответствующему div, но изображения не отображаются, так как возвращаемый результат не определен.

Итак, как я могу добавить каждый палец к соответствующему div?

Answer 1

Вы имеете logic error:

reader.onload = (function (e) { 
    //onload code 
    //inside function e is event from outside 
})(e);//e is event from upper code 

И i будет равен files.length потому onload обработчика асинхронный. Таким образом, вы должны изменить свой onload обработчик:

reader.onload = function (index) { 
    var img = document.createElement('img'); 
    img.className = 'thumbs_';//it's right className? 
    img.src = this.result;//result is dataURL     
    document.getElementById('nDv' + index).appendChild(img); 
}.bind(reader, i);