Javascript 删除每个图像缩略图预览的按钮_Javascript_Jquery_Html_Css_Ajax

Javascript 删除每个图像缩略图预览的按钮

javascript jquery html css ajax

Javascript 删除每个图像缩略图预览的按钮,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,你好，我需要你帮我查密码。我想在上传前预览多个图像，每个图像中都有删除按钮。但当我在每个删除按钮中使用div targeting时，我的代码不起作用首先，我的代码是这样的。当我添加一些更改时我的HTML： <body> <header> <h1>File API - FileReader</h1> </header> <article> <label for="files">Select m

你好，我需要你帮我查密码。我想在上传前预览多个图像，每个图像中都有删除按钮。但当我在每个删除按钮中使用div targeting时，我的代码不起作用

首先，我的代码是这样的。当我添加一些更改时

我的HTML：

<body>
<header>
    <h1>File API - FileReader</h1>
</header>
<article>
    <label for="files">Select multiple files: </label>
    <input id="files" type="file" multiple/>
    <output id="result" />
</article>

这是我的Java脚本：

 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 class='thumbnail' src='" + picFile.result + "'" +
                        "title='" + picFile.name + "'/> <a href='#' class='remove_pict'>X</a>";

                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


谢谢你提前通知。任何建议都将不胜感激^^
$("#result").on( "click",".remove_pict",function(){
    $(this).parent().remove();
});

这可能有助于您
图像和删除锚点是div
对象的子对象。在每个a
上放置单击事件，然后删除父级。因此，当用户单击x标记时，所选图像将被删除
div.children[1].addEventListener("click", function(event){
    div.parentNode.removeChild(div);
});

请参见上的演示。您需要在页面上显示图像，然后勾选要上载的每个图像。有一个按钮可选择多个图像。我只需要一个脚本预览和删除每个图像。。。你看到我的小提琴了吗？这个按钮是用来上传照片的。。你问的是一个双功能按钮，我认为它不存在。你需要两个按钮，一个选择图片预览，一个上传。当你预览时，你不需要删除——只需为每张图片创建一个容器框，用勾选按钮选择图片。好的。但嗯，实际上我想要的是在facebook上上传图片，当我们添加一些照片时，每个缩略图上都有一个“X”（删除）按钮。如果用户不想上传某些图片，他只需点击“X”按钮。如果我的问题不清楚，我很抱歉。有什么建议吗？没错，或者你可以这样做您所需要的只是点击一个上传按钮，然后在picsplase add jquery文件中循环该代码将无法工作，因为在这种情况下不使用jquery。试试我的答案。
div.children[1].addEventListener("click", function(event){
    div.parentNode.removeChild(div);
});