В проекте есть загрузчик картинок с "превьюшками" и есть несколько элементов 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);
}
progressbar.id = ("my-progress"+element_id);
откуда element_id значение?reader.onload
используется замыкание при этом в определенииreader.onprogress
нет, почему?