如何用JavaScript从数组中删除选中文件？求删除按钮实现逻辑

没问题，我来帮你搞定这个文件删除功能！首先得先搞清楚一个核心点：浏览器原生的FileList是只读的，没法直接删除里面的文件，所以咱们得换个思路——用自定义数组来维护选中的文件，然后同步更新页面显示。下面是完整的实现方案，我一步步给你讲清楚：

<input type="file" id="fileUploader" multiple>
<div id="divFiles"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    // 用这个数组来维护用户选中的所有文件（替代只读的FileList）
    let selectedFiles = [];

    $('input[type="file"]').change(function (e) {
        // 把新选择的文件添加到数组里，这里加了简单的去重逻辑（可选）
        Array.from(this.files).forEach(file => {
            // 通过文件名+文件大小判断是否已存在，避免重复添加
            if (!selectedFiles.some(f => f.name === file.name && f.size === file.size)) {
                selectedFiles.push(file);
            }
        });
        // 更新页面上的文件列表
        renderFileList();
    });

    // 专门负责渲染文件列表的函数
    function renderFileList() {
        const output = document.getElementById('divFiles');
        let HTML = "<table>";
        
        // 遍历数组，给每个文件生成带删除按钮的行
        selectedFiles.forEach((file, index) => {
            HTML += `<tr data-index="${index}">
                        <td>${file.name}</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="delete-btn" data-index="${index}">删除</button>
                        </td>
                    </tr>`;
        });
        
        HTML += "</table>";
        output.innerHTML = HTML;

        // 给动态生成的删除按钮绑定点击事件
        $('.delete-btn').click(function() {
            const targetIndex = parseInt($(this).data('index'));
            // 从数组中删除对应索引的文件
            selectedFiles.splice(targetIndex, 1);
            // 重新渲染列表，更新页面显示
            renderFileList();
        });
    }
});
</script>

1. 用自定义数组替代原生FileList #

因为input.files返回的FileList是只读对象，不能直接修改，所以我们声明了selectedFiles数组，所有的添加、删除操作都针对这个数组来做，这样就能灵活控制文件列表了。

2. 动态生成带删除按钮的列表 #

在渲染列表时，给每一行和删除按钮都加上data-index属性，存储该文件在数组中的索引，这样点击删除按钮时，就能精准定位到要删除的数组元素。

3. 删除按钮的点击逻辑 #

点击删除按钮时，先获取对应的索引，然后用数组的splice方法删除该元素，最后重新调用renderFileList()函数，更新页面上的文件列表，这样DOM和数组的状态就同步了。

• 事件委托优化：如果你的文件列表会频繁更新，也可以用jQuery的事件委托来绑定删除事件，避免每次渲染都重新绑定：

  $(document).on('click', '.delete-btn', function() {
      const targetIndex = parseInt($(this).data('index'));
      selectedFiles.splice(targetIndex, 1);
      renderFileList();
  });
  

  把这段代码放在$(document).ready()里就行，不用每次渲染都绑定。

• 表单提交处理：如果后续需要把文件提交到服务器，记得用FormData把selectedFiles里的文件加进去，而不是用原生的input.files：

  const formData = new FormData();
  selectedFiles.forEach(file => {
      formData.append('files[]', file);
  });
  // 然后用AJAX提交formData到后端
  

这样整个功能就完整啦，你可以直接把这段代码整合到你的项目里，根据需求调整细节就行~

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