javascript - 如何在每次上传图像时为其指定不同的ID

Question

我目前正在测试用户 OGiS0 的一段代码。这是上传图像的javascript代码。我该如何做到这一点，以便每次上传图像时，它都会获得一个新的 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，因此无法进行拖放。

Answer 1

快速而肮脏:使用全局变量 (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 + "'/>";