在将表单提交到服务器之前，是否可以使用 js 从用户多文件输入选择中删除部分文件？

Question

我正在尝试在提交之前在我的 html5 表单的多文件输入元素中过滤一些用户选择的文件。似乎您可以从表单上的任何文件输入中删除所有用户选择的文件，或者在提交表单并上传到服务器之前从文件输入中删除用户选择的文件的 none。如果能够在上传之前删除任何有问题的文件，那就太好了。否则必须允许文件上传并让php处理上传的文件post提交。感谢您的任何想法。

Answer 1

看来我的怀疑得到了证实，将文件添加到文件输入的唯一方法是将其设置为等于 dataTransfer 对象，即：

fileInput.files=evt.dataTransfer.files;

evt.dataTransfer.files代表用户selected/dropped的文件，无法通过页面js代码更改。

我无法使用 formData.append() 将单个文件通过多个附加迭代附加到文件输入来将文件添加到文件输入。

下面的解决方案有效。该过程是在页面加载时实例化您自己的 dataTransfer 对象。然后在每次拖动或浏览时从 evt.dataTransfer.files 获取用户上传的文件并遍历它们。当您找到符合条件的文件时，将它们添加到您自己的自定义数据传输对象中。一旦您自己的 dataTransfer 对象全部设置为您希望在每次用户删除后添加的文件，请更新 fileInput.files= 您自己的 dataTransfer 对象。

加载：

var dT=new dataTransfer(); var fileInput=document.forms[0].elements['files[]'];

//现在在每次放置时，您将获得用户选择的文件： evt.dataTransfer.files 所以你总是从那个开始。

function dropHandler(evt) {
    
    //prevent default action
    evt.preventDefault();
    evt.stopPropagation();
   //for each file in the user selection, validate them as you wish
   //and only add the ones you want to the dataTransfer object you already created.
   for (const file of evt.dataTransfer.files) {
        //if this validate that etc
        //if file is good to add
        dT.items.add(file);
        }
   //at the end of each drop
   //once you have added only the files you want to your own dT object
   //update your form's file input's files to the latest version of your dT object's files
    fileInput.files=dT.files;
    }//end drop handler function`

现在您的表单文件输入仅填充了您想要的用户选择的文件，已清除其余文件并准备好提交表单。

在将表单提交到服务器之前，是否可以使用 js 从用户多文件输入选择中删除部分文件？

Is it possible to remove just some of the files from a user multiple file input selection using js before submitting the form to the server?

javascript

forms

file

input

upload