Страницы

Поиск по вопросам

понедельник, 15 июля 2019 г.

Связать событие Filereader().onprogress с множественными элементами progress

В проекте есть загрузчик картинок с "превьюшками" и есть несколько элементов progress для отображения процесса загрузки по каждой картинке отдельно. Но приведенный код отображает прогресс только на последнем, созданном элементе progress. Подскажите пожалуйста как сделать так чтобы процесс загрузки каждой картинки отображался в соответствующем элементе progress?
function processFiles(files) { var numFiles = files.length;
for (var i = 0, numFiles = files.length; i < numFiles; i++) { var f = files[i];
// Обрабатываем только графические файлы ! if (!f.type.match('image.*')) { continue; }
//Проверяем существует ли элемент img если нет то запишем следующую картинку в него for (var e = 0; e < image_amount_restriction; e++) { if (document.getElementById("img"+e)==null) { element_id=e; break; } }
var last = image_amount_restriction - element_id; console.log(last); if ( last < 2) {return false;}

//создем обьекты UI var parent = document.getElementById("photos"); var div = document.createElement("div"); div.id = ("block"+element_id); div.className = "editbox";
parent.appendChild(div);
var parentE2 = document.getElementById("block"+element_id); var edit_panel = document.createElement("span"); edit_panel.className = "edit_panel"; edit_panel.id = ("edit_panel"+element_id);
var hiddenfield = document.createElement("input"); hiddenfield.type = "hidden"; hiddenfield.name ="output[]"; hiddenfield.id =("out"+element_id);
parentE2.appendChild(hiddenfield);
var img = document.createElement("img"); img.classList.add("obj"); img.id = ("img"+element_id);
parentE2.appendChild(edit_panel); parentE2.appendChild(img);
//прогрессбар var progressbar = document.createElement("progress"); progressbar.id = ("my-progress"+element_id); progressbar.className = "progressbar"; parentE2.appendChild(progressbar);
var parentE3 = document.getElementById("edit_panel"+element_id); var trash_can = document.createElement("a"); trash_can.className = "foto_n1"; trash_can.id = element_id; trash_can.href = "#"; trash_can.onclick = remove;
parentE3.appendChild(trash_can);

var reader = new FileReader();
//Недоделанный прогрессбар! reader.onprogress = function(event) {
if (event.lengthComputable) { console.log(progressbar.id); progressbar.max = event.total; progressbar.value = event.loaded; } }
reader.onloadend = function(event) { var contents = event.target.result, error = event.target.error; if (error != null) { console.error("File could not be read! Code " + error.code); } else { progressbar.max = 1; progressbar.value = 1; } }

// Пишем картинки после загрузки в соответсвующие контейнеры reader.onload = (function(aImg,hiddenfield,progressbar) { return function(e) { aImg.src = e.target.result; hiddenfield.value=e.target.result; //когда загрузились, скрываем прогресс бар progressbar.className += " hidden"; }; }) (img,hiddenfield,progressbar);
reader.readAsDataURL(f); }


Ответ

Скорее всего, это связано с тем, что не использовано замыкание при привязке обработчика. Т.к. не видно необходимого кода, то попробую посоветовать "на глаз":
for (i=0; iВ функцию progressHook(event, i) первым параметром передаётся событие, а вторым - порядковый номер файла, прогресс, которого хотите отслеживать.

Комментариев нет:

Отправить комментарий