按下 X 按钮后删除的图像也在提交页面后提交

Question

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

以下是一些截图：

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

我在提交前删除了 1 张图片

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

在最后一张截图中，它显示所有 3 张图片都在上传，即使我删除了其中一张也是如此。我怎样才能让它工作？？

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

<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

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

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