генерация динамического идентификатора с помощью File reader() javascript

Question

Я пытаюсь создать несколько загружаемых изображений с возможностью удаления, до сих пор я могу выбрать уникальные несколько файлов, но я хочу иметь вариант удаления. Для этого мне нужно создать идентификатор для каждого изображения, чтобы удалить его перед загрузкой:

window.onload = function(){ 

//Check File API support 
if(window.File && window.FileList && window.FileReader) 
{ 

var filesInput = document.getElementById("files"); 

filesInput.addEventListener("change", function(event){ 

    var files = event.target.files; //FileList object 
    var dive = $(".overview").find('img').length; 
    var output = document.getElementById("result"); 
    // console.log(files); 

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


     //Only pics 
     if(!file.type.match('image')) 
      continue; 


     $(".overview .imgdivcon").each(function(){ 

     var its =$(this).children().eq(1).attr("title"); 
       if(its == file.name){ 
       throw alert("already exits") ; 

      } 
     }); 
     var divn = i+dive+1; 
     var picReader = new FileReader(); 

     console.log(divn); 


     picReader.addEventListener("load",function(event){ 

      var picFile = event.target; 

      var div = document.createElement("div"); 
       div.className="imgdivcon"; 

      div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" + 
        "title='" + file.name + "'/>";      
      output.insertBefore(div,null);   
     }); 


     //Read the image 
     picReader.readAsDataURL(file); 



    }        

}); 

, когда я буду выбирать один кадр его генерирующий уникальный идентификатор для каждого изображения, но когда я хочу выбрать несколько изображений это дает общее количество изображений рассчитывать для каждого изображения, но не уникальный счет.

вот моя js скрипка ссылка http://jsfiddle.net/aerfan/CdgUV/ небольшая помощь wil быть aprreciated.

Answer 1

У вас неправильный уникальный идентификатор (должен быть порядок изображения вместо общего количества), когда вы выбираете несколько изображений, потому что переменная «divn» будет общим количеством изображений при срабатывании обработчика события загрузки picReader.

Закрытие добавит локальную переменную в свою область действия при создании функции. Внешний цикл for завершен до того, как выполняется обратный вызов загрузки файла считывателя, а divn будет общим количеством изображений.

for(var i = 0; i< files.length; i++) 
{ 
    ...... 
    var divn = i+dive+1; //this variable will be added to callback closure 

    ....... 

    picReader.addEventListener("load",function(event){ 

     ........ 
     //divn is always the total count of images 
     div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" + 
       "title='" + file.name + "'/>";      
     output.insertBefore(div,null);   
    }); 
} 

Для решения этой проблемы вы можете попробовать использовать технику каррирования. Давайте обновим обратный вызов события нагрузки picReader:

picReader.addEventListener("load",(function(divn){ 
    return function(event){ 
     var picFile = event.target; 

     var div = document.createElement("div"); 
     div.className="imgdivcon"; 

     div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" + 
          "title='" + file.name + "'/>";      
     output.insertBefore(div,null); 
    }; 

})(divn)); 

Вы можете предварительное заполнение аргумента (divn), закрытие использования помнить свой статус и вернуть новую функцию с помощью каррирования.

Надеюсь, это полезно для вас.