0

我正在尝试使用删除选项创建多个图像上传器，直到现在我能够选择唯一的多个文件，但我想要一个删除选项。为此我必须为每个图像生成一个 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 dive = $(".overview").find('img').length;
    var output = document.getElementById("result");
    // console.log(files);

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


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


      $(".overview .imgdivcon").each(function(){

        var its =$(this).children().eq(1).attr("title");
                if(its == file.name ){
                throw alert("already exits") ;

            }
        });
        var divn = i+dive+1;
        var picReader = new FileReader();

        console.log(divn);


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

            var picFile = event.target;

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

            div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" +
                    "title='" + file.name + "'/>";                    
            output.insertBefore(div,null);          
        });   


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



    }                               

});

当我选择单个图像时，它会为每个图像生成唯一的 id，但是当我选择多个图像时，它会为每个图像提供总图像计数，而不是唯一计数。

这是我的 js fiddle 链接http://jsfiddle.net/aerfan/CdgUV/将得到一点帮助。

4

1 回答 1

1

当您选择多个图像时，您得到了错误的唯一 ID（应该是图像的顺序而不是总数），因为“divn”变量将是触发 picReader 加载事件处理程序时图像的总数。

创建函数时，闭包会将局部变量添加到其作用域中。外部 for 循环在执行文件读取器加载回调之前完成，并且 divn 将是图像的总数。

for(var i = 0; i< files.length; i++)
{
    ......
    var divn = i+dive+1;   //this variable will be added to callback closure

    .......

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

        ........
        //divn is always the total count of images
        div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" +
                "title='" + file.name + "'/>";                    
        output.insertBefore(div,null);          
    });
}

为了解决这个问题，你可以尝试使用柯里化技术。让我们更新 picReader 加载事件回调：

picReader.addEventListener("load",(function(divn){
    return function(event){
        var picFile = event.target;

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

        div.innerHTML = "<p onclick='sliceimg("+divn+")' class='close' name='"+i+"' id='cl'>x</p><img width='150' height='150' class='thumbnail' src='" + picFile.result + "'" +
                          "title='" + file.name + "'/>";                    
        output.insertBefore(div,null);
    };

})(divn));

您可以预填充参数 (divn) ，使用闭包来记住它的状态并使用柯里化返回新函数。

希望这对你有帮助。

于 2013-07-31T07:13:36.473 回答