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

快速而肮脏：使用全局变量（$scope.GoingAway = 0; $scope.CustomHide = function(e){ $scope.GoingAway = 1; setTimeout(function(){ $scope.modal.hide(); $scope.GoingAway = 0; },2600) }）。

您不应使用window.thumbId变量的原因是，每次上传图片时都会重新启动。

i无论多少次和您上传了多少张图片都可以使用。你会得到window.thumbId，thumbnail1等的ID：

thumbnail2

Answer 2

如果文件存储在数据库中，您可以使用db索引作为唯一ID，获取最后一个索引，并在每个新项目上使用+1。

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

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

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

2 个答案: