如何在每次上傳圖片時提供不同的ID

我目前正在用戶OGiS0測試一段代碼。這是一個上傳圖像的JavaScript代碼。我該如何做到這一點，以便每次上傳圖片時都會得到一個新的ID，這樣我就可以無干擾地拖放它。如何在每次上傳圖片時提供不同的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 output = document.getElementById("result"); 

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

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

      var picReader = new FileReader(); 

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

       var picFile = event.target; 

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

       div.innerHTML = "<img id='thumbnail' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" + 
         "title='" + picFile.name + "'/>"; 


       output.insertBefore(div,null);    

      }); 

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

    }); 
} 
else 
{ 
    console.log("Your browser does not support File API"); 
}

}

小提琴來顯示它是如何工作的：http://jsfiddle.net/Yvgc2/1563/

目前，當上傳所以不能發生拖放所有的圖像具有相同的ID。

來源

2017-05-08 ratdown

快速和骯髒的：使用全局變量（window.thumbId）。

您不應該使用i變量的原因是，它會在您每次上傳圖片時重新啓動。

window.thumbId將工作無論多少次和多少圖像您上傳。您將獲得像thumbnail1，thumbnail2等ID：

window.thumbId = (window.thumbId || 0)+1; 
div.innerHTML = "<img id='thumbnail"+window.thumbId+"' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" + 
          "title='" + picFile.name + "'/>";

來源

2017-05-08 01:59:42

如果文件存儲在數據庫中，則可以使用db索引作爲唯一ID，獲取每個新項目的最後一個索引和+1。

如果沒有，你可以使用循環索引並替換該行

div.innerHTML = "<img id='"+i+"' draggable='true' ondragstart='drag(event)' src='" + picFile.result + "'" + 
         "title='" + picFile.name + "'/>";

來源

2017-05-08 01:59:21 Paddy

如何在每次上傳圖片時提供不同的ID

回答

相關問題