Question

我有一个表格可以用来提交一些数据以及多张图像，选择多张图像后可以预览和删除它们。但是，在单击“删除”按钮后，我的文件实际上并未从“队列”中删除，而是仅从前端删除，并且在单击“提交”按钮后，它发送了所有文件（甚至是已删除的文件）到php文件进行处理。

我尝试使用this中的答案发布来自javascript文件的数据，但这只是将文件计数重置为零。

JS：

$("#spfiles").on("change", function(e) {
        var files = e.target.files,
        filesLength = files.length;


        for (var i = 0; i < filesLength; i++) {

            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
                var file = e.target;
                $("<span class=\"pip\" style='text-align:center;'>" +
                    "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/>" +
                    "<br/><span>" + f.name + "</span>" +
                    "<br/><span class=\"remove\">Remove image</span>" +
                    "</span>").insertAfter("#spfiles");
                $(".remove").click(function(){
                    $(this).parent(".pip").remove();
                });
});

    fileReader.readAsDataURL(f);
}
});
} else {
    alert("Your browser doesn't support to File API")
}
});

HTML：

<div class="form-row pl-2 pr-2 pb-3 field" align="left">
div style="padding-top: 20px;">
    <label>Upload some images. (Minimum 5.)</label>
</div>
<div style="padding-top: 20px;max-width: 630px;">
    <input type="file" id="spfiles" name="files[]" multiple />
</div>
</div>

我不会使用删除按钮从阵列中删除选定的文件，因此只有显示的文件被发送以进行处理。

文件输入未从表单中删除

0 个答案: