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

Ваш ответ

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

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