我有这个 DOM：
var id = 0;
$('input:file#upload')[0].files[ id ]
那就是第 0 个索引上的第一个文件。列出了文件属性并且一切正常，但是...
我们如何[object FileList]使用 JavaScript从 DOM 中删除项目？
从多个“输入：文件”中删除文件列表项
IT技术
javascript
html
input
upload
2021-03-11 18:29:42
6个回答
终于找到方法了！我之前input.files就知道会接受 FileList，但获得它的唯一方法是通过拖放事件。
但是现在我知道如何构建自己的 FileList 了！
这适用于 chrome（也许还有其他一些）
const dt = new DataTransfer()
dt.items.add(new File([], 'a.txt'))
input.files = dt.files
// This will remove the first item when selecting many files
input.onchange = () => {
const dt = new DataTransfer()
for (let file of input.files)
if (file !== input.files[0])
dt.items.add(file)
input.onchange = null // remove event listener
input.files = dt.files // this will trigger a change event
}<input type="file" multiple id="input">这适用于 Firefox
const cd = new ClipboardEvent("").clipboardData
cd.items.add(new File(['a'], 'a.txt'))
input.files = cd.files
// This will remove the fist item when selecting many files
input.onchange = () => {
const dt = new DataTransfer()
for (let file of input.files)
if (file !== input.files[0])
dt.items.add(file)
input.onchange = null // remove event listener
input.files = dt.files // this will trigger a change event
}<input type="file" multiple id="input">问题是您需要遍历输入中的每个文件，添加您仍然想要保留的文件，并使用新的文件列表分配 file.files。
恐怕您无法FileList object直接从中删除对象。只需分配$('input:file#upload')[0].files给 anArray然后使用splice您选择的方法从该数组中删除项目，然后使用 that Array。
我找到了非常快速和简短的解决方法。在许多流行的浏览器（Chrome、Firefox、Safari）中测试；
首先，您必须将 FileList 转换为数组
var newFileList = Array.from(event.target.files);
删除特定元素使用此
newFileList.splice(index,1);
最实用的删除方法FileList object是从 DOM 中删除文件输入本身，然后再次重新附加它。这将从文件列表中删除所有项目。
我知道很多人会说这不是一个优雅的解决方案，但它很容易实现，在大多数情况下是一种更好的方法，并且您可以对输入文件执行重要的操作，验证！
到现在为止，您会看到FileList object很难控制。如果您确实需要操作单个文件项，请阅读RAYMOND CAMDEN 的 Multi-File Uploads and Multiple Selects（第 2 部分）
。我更喜欢让用户再次选择文件（如果他做了傻事）并给他一个错误信息，说明出了什么问题。这不会使用户体验变差。
提醒一下，请注意输入文件会带来安全漏洞（漏洞：无限制文件上传）。
由于这篇文章并没有真正回答这个问题，我知道它不会得到任何分数，但真的要考虑替代方案。对于我实现删除文件对象项时的情况，即使某些文件没问题，在某些文件未通过验证后继续上传也没有意义。最后，用户仍然必须打开输入文件并重做该过程。因此，就我而言，此功能只是增加了复杂性，并且在规范中并没有对输入文件进行如此多的控制。
下面是一个带有验证的示例，该示例删除所有FileList object失败时：
function validateFormfile(inputTypeFile_id) {
$(inputTypeFile_id).change((event) => {
//check if files were select, if not, nothing is done
if (event.target.files.length > 0) {
let fileName;
let totalsize = 0;
let notvalidate = false;
for (let i = 0; i < event.target.files.length; i++) {
fileName = event.target.files[i].name;
fileSize = event.target.files[i].size;
if (fileName != undefined || fileName != "") {
if (validate_fileExtension(fileName) === false) {
notvalidate = true;
let errorMessage = "File upload must be of 'audio', 'image', 'video', 'text', or 'pdf' format!";
//write you error function to show error to user
//alertpanel(errorMessage);
console.log(errorMessage);
break;
}
totalsize += Number(event.target.files[i].size);
console.log(fileName, fileSize, "bytes");
}
}
//check if file size is bigger than maxsize
let maxsize = 10 * 1024 * 1024; //10Mb
if (totalsize > maxsize && notvalidate === false) {
notvalidate = true;
let errorMessage = `Upload files cannot exceed the maximum of ${maxsize} bytes.`;
//write you error function to show error to user
//alertpanel(errorMessage);
console.log(errorMessage);
}
if (notvalidate) {
//select the node where to append the input file
let inputlabel = $(inputTypeFile_id).siblings().first();
//we delete the input file element to delete its FileList object content and re-append to the DOM
$(inputTypeFile_id).remove();
let input_file = $('<input type="file" id="upload" name="upload" accept="application/pdf, text/plain, audio/*, video/*, image/*" multiple required>');
//append the input file after the selected inputlabel node
inputlabel.after(input_file);
//re init any event listener for the re-appended element
validateFormfile(inputTypeFile_id);
}
}
});
}
function validate_fileExtension(fileName) {
let image_extensions = new Array("bmp", "jpg", "jpeg", "jpe", "jfif", "png", "gif");
let text_extensions = new Array("txt", "pdf");
let video_extensions = new Array("avi", "mpeg", "mpg", "mp4", "mkv");
let audio_extensions = new Array("mp3", "acc", "wav", "ogg");
let allowed_extensions = image_extensions.concat(text_extensions, video_extensions, audio_extensions);
// split function will split the fileName by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the fileName.
let file_extension = fileName.split('.').pop().toLowerCase();
for (let i = 0; i <= allowed_extensions.length; i++) {
if (allowed_extensions[i] == file_extension) {
return true; // valid file extension
}
}
return false;
}
//init event listener to input file
$(document).ready(
validateFormfile("#upload")
);label,
input {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="upload">Choose File(s) (Max: 10Mb)</label>
<input type="file" id="upload" name="upload" accept="application/pdf, text/plain, audio/*, video/*, image/*" multiple required>
<br><small>text|pdf|audio|image|video</small>我希望这在某种程度上有所帮助。
由于您无法直接更改fileList对象，因此您可以实例化一个新DataTransfer对象并迭代地将所需的附加文件复制到该对象中。然后将其分配给输入的 files 属性。
function removeFile(index){
var attachments = document.getElementById("attachment").files; // <-- reference your file input here
var fileBuffer = new DataTransfer();
// append the file list to an array iteratively
for (let i = 0; i < attachments.length; i++) {
// Exclude file in specified index
if (index !== i)
fileBuffer.items.add(attachments[i]);
}
// Assign buffer to file input
document.getElementById("attachment").files = fileBuffer.files; // <-- according to your file input reference
}
PS：我尝试使用DataTransferObject.items.remove(index) 方法，但由于某种原因它清除了整个 fileList 数组。这就是我使用 for 循环的原因。