Wie gebe ich ein Bild eine andere ID jedes Mal, wenn es hochgeladen wird

Question

Ich teste gerade ein Stück Code von Benutzer OGiS0. Es ist ein JavaScript-Code, der Bilder hochlädt. Wie würde ich es so machen, dass jedes Mal, wenn ein Bild hochgeladen wird, eine neue ID erhalten wird, sodass ich es ohne Störung ziehen und ablegen kann.

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

}

Fiddle zu zeigen, wie es funktioniert: http://jsfiddle.net/Yvgc2/1563/

Derzeit werden alle Bilder die gleiche ID haben, wenn hochgeladen so Drag & Drop nicht auftreten kann.

Answer 1

Schnell und schmutzig: Verwenden Sie eine globale Variable (window.thumbId).

Der Grund, warum Sie die Variable i nicht verwenden sollten, ist, dass sie jedes Mal neu gestartet wird, wenn Sie Bilder hochladen.

window.thumbId funktioniert unabhängig wie oft und , wie viele Bilder Sie hochladen. Sie erhalten IDs wie thumbnail1, thumbnail2 usw.:

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

Answer 2

Wenn die Dateien in einer Datenbank gespeichert werden, können Sie den Datenbankindex als eindeutige ID verwenden, den letzten Index und +1 für jedes neue Element erhalten.

Wenn nicht, können Sie die Schleifen-Index verwenden und ersetzen Sie diese Zeile

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