3

В проекте есть загрузчик картинок с "превьюшками" и есть несколько элементов 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);
}   
4
  • Пожалуйста, придерживайтесь принятой практики в отношении приветствий.
    – Streletz
    20 янв 2016 в 20:20
  • приведите код полностью. не хватает информации
    – Max T
    20 янв 2016 в 20:56
  • в определении progressbar.id = ("my-progress"+element_id); откуда element_id значение?
    – Max T
    21 янв 2016 в 12:17
  • у вас в определении события reader.onload используется замыкание при этом в определении reader.onprogress нет, почему?
    – Max T
    21 янв 2016 в 12:19

1 ответ 1

1

Скорее всего, это связано с тем, что не использовано замыкание при привязке обработчика. Т.к. не видно необходимого кода, то попробую посоветовать "на глаз":

        for (i=0; i<arFiles.length; i++){       
            var reader = new FileReader();
            reader.addEventListener('progress', (function(i){
                                                return function(event){ progressHook(event, i) }
                                            })(i) );
        ...
            reader.readAsDataURL(arFiles[i]);
        }

В функцию progressHook(event, i) первым параметром передаётся событие, а вторым - порядковый номер файла, прогресс, которого хотите отслеживать.

1
  • Благодарю - направили в правильное русло.
    – Mike
    23 янв 2016 в 14:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.