動態ID生成使用JavaScript

Question

我想創建與刪除選項多圖片上傳文件閱讀器（），到現在我能夠選擇獨特的多個文件，但我想有。對於一個刪除選項我不得不產生ID爲每個圖像在上傳之前將其刪除：

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); 



    }        

}); 

當我選擇單個圖像生成的唯一的ID爲每個圖像，但是當我選擇多張圖像它給總的圖像，計數爲每個圖像而不是一個獨特的計數。

這裏是我JS提琴鏈接http://jsfiddle.net/aerfan/CdgUV/一點幫助時便會aprreciated。

Answer 1

你有錯唯一的ID（應該是圖像，而不是總數的順序）當您選擇多張圖像，因爲「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），使用封閉記住它的狀態，並通過使用鑽營返回新功能。

希望這對你有所幫助。