javascript - 如何使用预览从数组 $_FILES 中删除一张图像 - Javascript/PHP

Question

我想在带有预览和删除选项的表单中创建一个多图像 uploader 。我正在使用 php 作为我的后端的一部分。

预览部分很简单。我已按照

中的说明进行操作

Image Upload with preview and Delete option - Javascript / Jquery

当我想删除图像时，我的问题就来了。它已从预览中删除，但未从 e.target.files 数组中删除，因此当我在 php 中访问变量 $_FILES 时，我获得了所有图像，包括已删除的图像。

正如您在图片中看到的，如果我从最初的 5 个图像中删除两个图像，仍然会有一条消息说我有 5 个文件。

我想知道如何才能完全删除这些图像，所以在 php 中我只能访问尚未删除的图像。

谢谢。

Answer 1

表格

<form id="myForm" method="post">

Files: <input type="file" id="files" name="files" multiple><br/>

<div id="selectedFiles"></div>

<input type="submit">
</form>

Ajax

 var selDiv = "";
        var storedFiles = [];

        $(document).ready(function() {
            $("#files").on("change", handleFileSelect);

            selDiv = $("#selectedFiles"); 
            $("#myForm").on("submit", handleForm);

            $("body").on("click", ".selFile", removeFile);
        });

        function handleFileSelect(e) {
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function(f) {          

                if(!f.type.match("image.*")) {
                    return;
                }
                storedFiles.push(f);

                var reader = new FileReader();
                reader.onload = function (e) {
                    var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
                    selDiv.append(html);

                }
                reader.readAsDataURL(f); 
            });

        }

        function handleForm(e) {
            e.preventDefault();
            var formdata = new FormData();

            for(var i=0, len=storedFiles.length; i<len; i++) {
                formdata.append('files[]', storedFiles[i]); 
            }

            $.ajax({
                    url: "tab.php",
                    type: 'POST',
                    data: formdata,
                    dataType: "json",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data) {
                        return true;
                    }
                });
        }

        function removeFile(e) {
            var file = $(this).data("file");
            for(var i=0;i<storedFiles.length;i++) {
                if(storedFiles[i].name === file) {
                    storedFiles.splice(i,1);
                    break;
                }
            }
            $(this).parent().remove();
        }