Javascript 如何在每次上传图像时为其提供不同的id

我目前正在测试一段由用户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");
}

window.onload=function（）{
//检查文件API支持
if（window.File&&window.FileList&&window.FileReader）
{
var filesInput=document.getElementById（“文件”）；
FileInput.addEventListener（“更改”，函数（事件）{
var files=event.target.files；//文件列表对象
var输出=document.getElementById（“结果”）；
对于（var i=0；i

}

用小提琴来展示它是如何工作的：

---

目前，上传时所有图像都具有相同的id，因此无法进行拖放

如果文件存储在DB中，您可以使用DB索引作为唯一id，在每个新项上获取最后一个索引和+1

如果没有，您可以使用循环索引并替换此行

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

div.innerHTML=“”；

快速脏：使用全局变量（

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 + "'/>";

window.thumbId=（window.thumbId | | 0）+1；
div.innerHTML=“”；