Question

我正在使用输入多个文件类型上传多个图像，它们将在div输入部分下方进行预览。预览图像都带有一个X按钮，如果按下该按钮，它将被删除。单击X时预览的图像将删除它们，但是当我这样做并按提交时，即使那些已删除的图像也将被提交。

以下是一些屏幕截图：

添加图像后预览图像的屏幕截图

在这里，我在提交之前删除了1张图片

按下提交按钮后的屏幕截图

在最后一个屏幕截图中，即使我删除了其中三个图像，它也显示了所有3个图像均已上传。我怎样才能使其正常工作？

<-HTML图片上传->

<input id="files" class="img-upload imagefet" type="file" name="upload_attachment[]" id="control" data-multiple-caption="{count} files selected" multiple/ >

<-这是将预览添加的图像的div->

<div class="result-wrapper">
 <div id="result">

 </div>

我正在使用的脚本

<script>

    //Check File API support
    var newImageObj = [];
    if (window.File && window.FileList) {
        var filesInput = $("#files");
        filesInput.on("change", function (e) {
            var files = e.target.files; //FileList object
            var result = $("#result");
            var pic_caption = $('#journalInputTitle').val();
            var i = 1;
            $.each(files, function (i, file) {
                var pReader = new FileReader();
                pReader.addEventListener("load", function (e) {
                    var pic = e.target;
                    result.append("<span class='thumbnail-wrapper thumbnail-wrapper" + i + "'><img class='thumbnail' src='" + pic.result + "'/><span class='thumbnail-category'>" + pic_caption + "</span><button class='remove' id='clear' onclick='removeDiv(this);'>&times;</button></span>").insertAfter("#files");
                    $(".remove").click(function(){
                        $(this).parent(".thumbnail-wrapper").remove();
                    });
                    //show();
                });
                pReader.readAsDataURL(file);
                i++;
                newImageObj.push(file);
            });
        });
    } else {
        console.log("Not supported browser");
    }

Answer 1

原因是您没有刷新change事件中的“ newImageObj”数组。所以在change事件中清空您的数组。

filesInput.on("change", function (e) {
   newImageObj = [];
});

提交页面后，按X按钮后也已提交删除的图像

1 个答案: