Javascript 从多个“文件”中删除文件列表项；输入：文件"；

我有一个DOM：

var id = 0;

$('input:file#upload')[0].files[ id ]

这是第0个索引上的第一个文件。列出了文件属性和所有工作，但是

---

如何使用JavaScript从DOM的

[对象文件列表]

中删除项？

恐怕您无法直接从

文件列表对象中删除对象。只需将
$（'input:file#upload'）[0]。文件
分配到
数组
，然后使用
拼接
或您选择的方法从该数组中删除项目，然后使用该
数组
不，我们可以将其删除。
我实现了这一点，它肯定能工作

首先，您需要初始化这个变量

var newImageObj = [];
var ImageNo = 0;

然后在文件输入的更改上编写此代码

$("#exampleInputFileProduct").change(function () {

            var fileUpload = document.getElementById("exampleInputFileProduct");

            //$("#mainImages").html('');
            //$("#subImages").html('');

            if (typeof (FileReader) != "undefined") {

                //Here Check File Extension
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;


                for (var i = 0; i < fileUpload.files.length; i++) {
                    var j = 0;
                    var file = fileUpload.files[i];
                    var NewFile = fileUpload.files[i];
                    //Here Check File Size 1MB = 1000000 Bytes
                    if (file.size < 2048000) {
                        if (regex.test(file.name.toLowerCase())) {
                            var reader = new FileReader();
                            reader.onload = function (e) {

                                if ($("#mainImages").find(".item").attr("id") == "FirstSlider") {
                                    $("#mainImages").html('');
                                    $("#subImages").html('');
                                    $("#subImages").append("<div class='item active'></div>");
                                }

                                if ($("#mainImages").find(".item").hasClass("active")) {
                                    $("#mainImages").append("<div class='item " + ImageNo + "_CClass\'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>");
                                } else {
                                    $("#mainImages").append("<div class='item active " + ImageNo + "_CClass'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>");
                                }

                                //if ($("#subImages").find(".item").length == 0) {
                                //    $("#subImages").append("<div class='item active'></div>");
                                //} else {
                                if (($("#subImages").find(".item").find("div").length / 5) >= $("#subImages").find(".item").length) {
                                    $("#subImages").append("<div class='item'></div>");
                                }
                                //}

                                var append = 0;

                                $.each($("#subImages").find(".item"), function (p, pelement) {
                                    if (append == 0) {
                                        if ($(pelement).find("div").length != 5) {
                                            var newID = $(pelement).find("div").length;
                                            newID = newID;
                                            $(pelement).append("<div onclick='LoadImage(\"" + ImageNo + "_CClass\")' data-slide-to='" + newID + "' class='thumb " + ImageNo + "_CClass'> <img src='" + e.target.result + "' alt=''></div>");
                                            append = append + 1;
                                        }
                                    }
                                })

                                j = j + 1;

                                ImageNo = ImageNo + 1;
                            }

                            newImageObj.push(file);

                            reader.readAsDataURL(file);
                        }
                    }
                }
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });

$（“#示例InputFileProduct”）.change（函数（）{
var fileUpload=document.getElementById（“exampleInputFileProduct”）；
//$（“#主图像”）.html（“”）；
//$（“#子图像”）.html（“”）；
if（typeof（FileReader）！=“未定义”）{
//这里检查文件扩展名
var regex=/^（[a-zA-Z0-9\s\\\.\-：]）+（.jpg.jpeg.gif.png）$/；
对于（var i=0；i=$（“#子图像”）.find（.item”）.length）{
$（“#子图像”）。追加（“”）；
}
//}
var=0；
$.each（$（“#子图像”）.find（“.item”）、函数（p、pelement）{
if（append==0）{
if（$（pelement）.find（“div”）.length！=5）{
var newID=$（pelement）.find（“div”）.length；
newID=newID；
$（pelement）。追加（“”）；
追加=追加+1；
}
}
})
j=j+1；
ImageNo=ImageNo+1；
}
newImageObj.push（文件）；
reader.readAsDataURL（文件）；
}
}
}
}否则{
警报（“此浏览器不支持HTML5文件读取器”）；
}
});

最后，这两个函数将帮助完成剩下的工作

function LoadImage(objclass) {
            $("#mainImages").find(".item").removeClass("active");
            $("#mainImages").find("." + objclass + "").addClass("active");
        }

        function RemoveImage(objclass, ImageName) {

            $.each(newImageObj, function (e, element) {
                if ($(this)[0].name.toLowerCase().trim() == ImageName.trim()) {
                    newImageObj.pop(this);
                }
            });

            $("#mainImages").find("." + objclass + "").remove();
            $("#subImages").find(".item").find("." + objclass + "").remove();

            if ($("#mainImages").find(".item").length == 0) {
                $("#mainImages").append("<div class='item active'><i class='fa fa-times customIcon'></i><img class='CImage' src='/Content/img/DefaultProduct.gif' alt='' /></div>");
                $("#subImages").append("<div class='item active'><div data-target='#carousel' data-slide-to='0' class='thumb'> <img src='/Content/img/DefaultProduct.gif' alt=''></div></div></div>");
            } else {
                $("#mainImages").find(".item").removeClass("active");
                $("#mainImages").find(".item:first-child").addClass("active");
                $("#subImages").find(".item").removeClass("active");
                $("#subImages").find(".item:first-child").addClass("active");
            }
        }

函数加载映像（objclass）{
$（“#主图像”）.find（“.item”）.removeClass（“活动”）；
$（“#main images”）.find（“.”+objclass+”）.addClass（“活动”）；
}
函数RemoveImage（objclass，ImageName）{
$.each（newImageObj，函数（e，元素）{
if（$（this）[0].name.toLowerCase（）.trim（）==ImageName.trim（））{
newImageObj.pop（这个）；
}
});
$（“#main images”）.find（“.”+objclass+”）.remove（）；
$（“#子图像”）.find（“.item”）.find（“.”+objclass+”）.remove（）；
if（$（“#主图像”）.find（“.item”）.length==0）{
$（“#主图像”）。追加（“”）；
$（“#子图像”）。追加（“”）；
}否则{
$（“#主图像”）.find（“.item”）.removeClass（“活动”）；
$（“#mainImages”）.find（“.item:first child”）.addClass（“active”）；
$（“#子图像”）.find（“.item”）.removeClass（“活动”）；
$（“#子图像”）.find（“.item:first child”）.addClass（“active”）；
}
}

最后，当您提交表单而不是从数组中获取文件时，我发现了非常快速和简短的解决方法。在许多流行浏览器（Chrome、Firefox、Safari）中测试

首先，必须将文件列表转换为数组

var newFileList = Array.from(event.target.files);

要删除特定元素，请使用以下命令

newFileList.splice(index,1);

终于找到了办法！
我以前就知道，
input.files
会接受文件列表，但获得它的唯一方法是通过拖放事件

但现在我知道如何构建自己的文件列表了

这在chrome（可能还有其他一些）中起作用


const dt=new DataTransfer（）
添加（新文件（[]，'a.txt'））
input.files=dt.files
//这将在选择多个文件时删除第一项
input.onchange=（）=>{
const dt=新数据传输（）
for（让输入文件中的文件为input.files）
if（file！==input.files[0]）
dt.items.add（文件）
input.onchange=null//删除事件侦听器
input.files=dt.files//这将触发更改
//Upload multi files and removable from files when user  removed  file  ...
(function () {

    var filesToUpload = [];
    var fileIdCounter = 0;
    var fileIdCounterOnload = 0;

    $('#up').change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;

            var file = evt.target.files[i];
            var fileId = "file" + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });

            var reader = new FileReader();

            reader.onload = function (evt) {
                fileIdCounterOnload++;

                var fileIdOnload = "file" + fileIdCounterOnload;
                $("<li class=\"pip\"  data-fileid=\"" + fileIdOnload + "\">" +
                    "<img class=\"imageThumb\" src=\"" + evt.target.result + "\" title=\" \"/>" +
                    "<i class=\"icon-remove-circle remove removeFile\" ></i> " +
                    "</li>").insertAfter(".list");

                $(".remove").click(function () {

                    var fileId = $(this).parent(".pip").data("fileid");

                    // loop through the files array and check if the name of that file matches FileName
                    // and get the index of the match
        for (var i = 0; i < filesToUpload.length; ++i) {//here will start compare them 
                        if (filesToUpload[i].id === fileId) {
                            filesToUpload.splice(i, 1);// delete a file from list.
                        }
                    }
                    $(this).parent(".pip").remove();// remove file from view .
                });
            };
            reader.readAsDataURL(file); // convert to base64 string
        };

        //reset the input to null - nice little chrome bug!
        evt.target.value = null;
    });


    $(".btn").click(function (e) {
        e.preventDefault();

        var formData = new FormData();

        for (var i = 0, len = filesToUpload.length; i < len; i++) {
            formData.append("files", filesToUpload[i].file);
        }
        $.ajax({
            url: "/home/index2",
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
                alert("DONE");
                filesToUpload = [];
                fileIdCounter = 0;
                fileIdCounterOnload = 0;
            },
            error: function (data) {
                alert("ERROR - " + data.responseText);
            }
        });
    });
})()