Question

我有这个多图像fileupload，显示以缩略图形式上传的图像。

我想要实现的是当用户将鼠标悬停在其中一个缩略图上时，＆＃34; X＆＃34;显示并单击时删除该图片（以便不再显示缩略图，并且不会在表单中上传）。

以下是代码：

 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");
        if(files.length = 1){

        }
        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;
                //console.log(picFile);
                var div = document.createElement("div");
                div.setAttribute('class', 'col-sms-3 col-sm-3');
                div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                        "title='" + picFile.name + "'/><a href='javascript:;' class='remove_pict'><i class='soap-icon-close' style='font-size:2.5em;'></i></a>";       
                //div.children[1].addEventListener("click", function(event){
                   //div.parentNode.removeChild(div);
                //});        
                output.insertBefore(div,null);            
            });

             //Read the image
            picReader.readAsDataURL(file);               
        }                                     
    });
}
else 
{
    console.log("Your browser does not support File API");
}

现在，我尝试过这样的事情：

    $(document).on("mouseenter", ".thumbnail", function() {
    $(".remove_pict").show(); //OR
    //OR THIS: $(".thumbnail").closest(".remove_pict").show;
});

$(document).on("mouseleave", ".thumbnail", function() {
    $(".remove_pict").hide(); 
    //OR THIS: $(.thumbnail).closest(".remove_pict").hide();
});

closest甚至不起作用，另一种方法只是显示所有缩略图，它们也会非常快速地闪烁（idk为什么）。问题是我不知道如何定位动态添加的<a>，只显示一个并删除它对应的图片。

当用户点击＆＃34; X＆＃34;仅在用户将鼠标悬停在图片上时显示

0 个答案: