如何在multiple类型file输入框中删除指定索引的单个文件？

这个问题我之前也碰到过！原生的<input type="file">返回的FileList是只读对象，你没法直接修改或删除其中的单个元素，所以直接清空val(null)的方式只会把所有文件都删掉。要实现单个删除，得换个思路——自己维护一个可修改的文件数组来管理选中的文件，步骤如下：

1. 调整HTML结构 #

保留原文件输入框，新增一个容器用来展示选中的文件列表（方便用户看到并删除）：

<input id="seleccion" name="archivos" multiple type="file" accept=".doc,.docx,.pdf" />
<!-- 用来展示选中的文件和删除按钮 -->
<div id="file-list" style="margin-top: 10px;"></div>

2. 用JS维护文件数组并实现删除逻辑 #

我们需要用一个数组来存储选中的文件，监听文件输入的选择事件更新数组，同时渲染自定义的文件列表（带删除按钮）：

// 全局数组，用来存储选中的文件
let selectedFiles = [];

// 监听文件输入框的选择事件
$("#seleccion").on('change', function(e) {
    // 把新选中的文件合并到数组里（扩展运算符将FileList转为数组）
    selectedFiles = [...selectedFiles, ...e.target.files];
    // 渲染文件列表
    renderFileList();
});

// 渲染文件列表，每个文件后面加删除按钮
function renderFileList() {
    const fileContainer = $("#file-list");
    fileContainer.empty(); // 清空现有列表
    
    selectedFiles.forEach((file, index) => {
        // 创建每个文件的DOM元素，绑定删除函数并传入索引
        const fileItem = $(`
            <div style="padding: 4px; border-bottom: 1px solid #eee;">
                ${file.name} 
                <button onclick="EliminaArchivo(${index})" style="margin-left: 10px; color: red;">删除</button>
            </div>
        `);
        fileContainer.append(fileItem);
    });
}

// 你需要的单个删除函数
function EliminaArchivo(itemIndex) {
    // 从数组中删除对应索引的文件
    selectedFiles.splice(itemIndex, 1);
    // 重新渲染文件列表
    renderFileList();
}

3. 提交表单时的处理 #

因为我们现在是用自己的数组管理文件，原生表单提交不会自动带上这些文件，所以需要手动构建FormData来提交：

// 假设你的表单id是upload-form
$("#upload-form").on('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交
    
    const formData = new FormData();
    // 把数组里的文件逐个添加到FormData
    selectedFiles.forEach(file => {
        formData.append('archivos', file); // 这里的name要和后端接收的字段名一致
    });
    
    // 用AJAX提交FormData
    $.ajax({
        url: '/你的提交接口地址',
        type: 'POST',
        data: formData,
        processData: false, // 必须设置为false，否则jQuery会把FormData转成字符串
        contentType: false, // 必须设置为false，让浏览器自动设置正确的Content-Type
        success: function(res) {
            console.log('提交成功！', res);
            // 提交后可以清空数组和列表
            selectedFiles = [];
            renderFileList();
        },
        error: function(err) {
            console.error('提交失败:', err);
        }
    });
});

为什么这个方法可行？ #

原生FileList是只读的，无法直接修改，所以我们绕开它，用一个普通数组来存储选中的文件——数组是可修改的，splice方法可以轻松删除指定索引的元素。然后通过自定义的文件列表让用户操作，最后提交时用数组构建FormData，完全不依赖原生文件输入框的value。

内容的提问来源于stack exchange，提问作者rbahena_