JavaScript多文件上传相关内容翻译及技术问询改写请求

我来帮你拆解这段实现多文件上传并支持删除已选文件的代码，把每部分的作用和逻辑讲清楚：

核心功能概述 #

这段代码主要实现两个核心功能：

• 展示用户选择的多个文件的列表
• 允许用户删除列表中任意一条已选的文件记录

1. 删除按钮事件绑定（jQuery实现） #

这部分代码负责给删除按钮绑定点击事件，实现点击删除对应文件行的功能：

$(document).ready(function () {
    $(document).on('click', "button", function (e) {
        $(this).closest('tr').remove();
    });
});

代码解释：

• $(document).ready()：确保DOM完全加载后再执行内部代码，避免出现找不到元素的问题
• $(document).on('click', "button", ...)：使用事件委托的方式绑定点击事件，这样后续动态生成的删除按钮也能正常触发事件
• $(this).closest('tr').remove()：找到当前点击按钮所在的最近<tr>元素（也就是对应的文件行），并将其从DOM中移除

2. 文件列表展示与更新函数 #

这部分代码负责读取用户选择的文件，生成带删除按钮的文件列表：

var filelist = new Array();
updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');
    var HTML = "<table>";
    for (var i = 0; i < input.files.length; ++i) {
        filelist[i] = input.files.item(i).name;
        HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;<button>删除</button></td></tr>";
    }
    HTML += "</table>";
    output.innerHTML = HTML;
}

代码解释：

• filelist数组：用于存储用户选择的所有文件名，方便后续可能的其他操作（比如提交表单时获取文件名）
• updateList函数：当用户选择文件后触发，负责更新文件列表的展示
  • 获取文件上传控件（id="fileUploader"）和用于展示列表的容器（id="divFiles"）
  • 遍历上传控件中的files集合，将每个文件的文件名存入数组，并拼接表格行的HTML代码，每行包含文件名和删除按钮
  • 最后把拼接好的表格HTML插入到展示容器中

配套HTML结构 #

要让这段代码正常工作，你需要在页面中添加对应的HTML元素：

<!-- 多文件上传控件，选择文件后触发updateList函数 -->
<input type="file" id="fileUploader" multiple onchange="updateList()">
<!-- 用于展示文件列表的容器 -->
<div id="divFiles"></div>

关键属性说明：

• multiple：允许用户一次选择多个文件
• onchange="updateList()"：当用户选择文件（或修改选择的文件）时，自动调用updateList函数更新展示列表

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