如何通过单击按钮从多个输入文件中删除选定的文件

Question

在我的应用程序中，我有一个输入文件，在其下方列出了所选文件。每个选定的文件都有一个要删除的按钮，我需要在单击该按钮时删除该特定文件。但是我觉得很难，我可以删除一个文件，但是当涉及到多个文件时，我很难删除。请有人帮我这个。谢谢。

输入字段：

<div class="form-group mb-3">
                    <div class="custom-file">
                        <input
                            type="file"
                            class="custom-file-input"
                            id="referenceLetters"
                            name="referenceLetters[]"
                            aria-describedby="inputGroupFileAddon01"
                            onchange="updateReferenceList()"
                            multiple="multiple"
                            accept=".doc,.docx,.pdf"
                        />
                        <label class="custom-file-label" for="referenceLetters">Choose file</label>
                    </div>
                </div>
                <div id="selectedRefereceLetters">
                </div>

通过此函数列出所选文件：

function updateReferenceList() {
        var ref_input = document.getElementById('referenceLetters');
        var ref_output = document.getElementById('selectedRefereceLetters');
        var ref_children = "";
        for (var i = 0; i < ref_input.files.length; ++i) {
            ref_children += '<ul class="mb-2 file-preview">' +
                                    '<li class="d-flex align-items-center pb-2">'+
                                        '<button id="deleteRef" style="background: transparent; border: none !important; font-size:0;"><i class="ri-close-line mr-2"></i></button>'+
                                        '<i class="ri-file-text-line mr-2 text-gray-400 text-5xl"></i>'+
                                        '<div class="file">'+
                                            '<h4>'+ref_input.files.item(i).name+'</h4>'+
                                        '</div>'+
                                    '</li>'+
                                '</ul>';
        }

        ref_output.innerHTML = ref_children;

        $('#referenceLetters').closest('.form-group').removeClass('has-error');
        $('#referenceLetters-error').remove();
    }

当用户单击 ID 为 deleteRef 的按钮时，我需要删除该特定文件。我怎样才能做到这一点？

使用下面的方法我可以删除不是多文件输入的选定单个文件

$("body").on("click","#deletecv",function(){ 
        $("#cv").val('');
        updateCVList();
        return false;
    });

我想有一种方法可以将文件列表对象更改为数组并从数组中删除项目，但我仍然不知道如何实现它。

Answer 1

我认为你可以做这样的事情，但我没有尝试过 :) :

使用 javascript
单击按钮时将文件名添加到数组中
然后将带有 ajax 的数组发送到服务器
如果文件['name'] 在 deletedFiles 数组中继续。

Answer 2

我可以使用 javascript 中的数据传输对象来解决这个问题，下面是方法。

function updateReferenceList() {
        var ref_input = document.getElementById('referenceLetters');
        var ref_output = document.getElementById('selectedRefereceLetters');
        var ref_children = "";
        for (var i = 0; i < ref_input.files.length; ++i) {
            ref_children += '<div id="ref'+i+'"><ul class="mb-2 file-preview" >' +
                                    '<li class="d-flex align-items-center pb-2">'+
                                        '<button onclick="delRef('+i+')" class="deleteRef" style="background: transparent; border: none !important; font-size:0;"><i class="ri-close-line mr-2"></i></button>'+
                                        '<i class="ri-file-text-line mr-2 text-gray-400 text-5xl"></i>'+
                                        '<div class="file">'+
                                            '<h4>'+ref_input.files.item(i).name+'</h4>'+
                                        '</div>'+
                                    '</li>'+
                                '</ul></div>';
        }

        ref_output.innerHTML = ref_children;

        $('#referenceLetters').closest('.form-group').removeClass('has-error');
        $('#referenceLetters-error').remove();
    }

function delRef(index) {
        var dt = new DataTransfer()
        var input = document.getElementById('referenceLetters')
        var { files } = input
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            if (index !== i) dt.items.add(file) 
            input.files = dt.files
        }
        updateReferenceList();
    }

如何通过单击按钮从多个输入文件中删除选定的文件

how to delete a selected file from multiple input file from a button click

javascript

jquery

file

filelist