需使用HTML5的multiple属性配合FormData API实现多文件上传：在type="file"输入框添加multiple属性，通过input.files获取FileList，用FormData.append逐个添加文件，并可结合accept限制类型、校验大小、支持拖拽上传。
如果您希望在网页中允许用户一次选择多个文件进行上传，则需要通过 HTML 的原生属性和相关 API 实现多选功能。以下是实现多文件选择上传的具体方法：
一、使用 input 元素的 multiple 属性
HTML5 提供了 multiple 属性，可直接启用文件输入框的多选能力，无需 JavaScript 即可触发系统多选对话框。该属性作用于 type="file" 的 input 元素，使用户能按住 Ctrl（Windows）或 Command（macOS）键连续点击选择多个文件，或直接拖拽多个文件到文件选择区域（部分浏览器支持）。
1、在 HTML 中添加带有 multiple 属性的文件输入控件：。
2、为提升可访问性与语义化，添加 name 属性并设为数组形式，例如 name="files[]"，便于后端统一接收。
立即学习“前端免费学习笔记（深入）”；
3、可选地添加 accept 属性限制文件类型，如 accept=".jpg,.png,.pdf"，仅显示匹配类型的文件。
二、通过 FormData 动态收集多个文件
当用户完成多选后，input.files 属性返回一个 FileList 对象，它是一个类数组结构，包含所有被选中的 File 对象。借助 FormData 接口，可将这些文件逐个或批量附加至表单数据中，用于后续的 AJAX 上传。
1、获取文件输入元素：const input = document.querySelector('input[type="file"]');。
2、监听 change 事件，在用户选择完成后读取 input.files：input.addEventListener('change', (e) => { const files = e.target.files; });。
3、创建 FormData 实例：const formData = new FormData();。
4、遍历 files 并逐个追加：for (let i = 0; i append('files', files[i]); }。
三、使用 label 绑定增强交互体验
原生 file input 默认样式不一致且难以定制，可通过隐藏 input 并用 label 标签绑定其 id，实现自定义按钮样式与点击响应。该方式不影响 multiple 功能，同时提升视觉一致性与移动端点击热区面积。
1、为 input 设置唯一 id，例如 id="multiFileInput"，并添加 multiple 和 hidden 属性。
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
2、编写自定义 label：。
3、在 CSS 中定义 .upload-btn 样式，确保其具备明显可点击外观，例如背景色、内边距与光标变化。
四、限制最大文件数量与单文件大小
为防止用户误选过多或超大文件导致上传失败或服务压力，可在前端加入数量与体积校验逻辑。该步骤不依赖服务端，属于即时反馈型防护措施，提升用户体验连贯性。
1、在 change 事件处理函数中获取 files.length，若超过预设值（如 10），则调用 alert('最多只能选择10个文件') 并终止后续流程。
2、遍历每个 File 对象，检查其 size 属性（单位为字节），例如限制单文件不超过 5MB：if (file.size > 5 * 1024 * 1024) { /* 提示并跳过该文件 */ }。
3、构建过滤后的文件列表，仅将合规文件 append 到 FormData 中。
五、支持拖拽区域实现多文件选取
除点击选择外，可扩展支持拖拽上传功能。通过监听容器元素的 dragenter、dragover、drop 事件，捕获用户拖入的文件对象。该方式直接从 DataTransfer 对象中提取 files，与 input 触发的文件列表结构完全一致，可复用相同的上传逻辑。
1、为指定容器（如 div）添加 id="dropZone" 并设置基础样式，包括 border 与 padding 以形成可视区域。
2、阻止 dragenter 和 dragover 事件默认行为：e.preventDefault();，否则浏览器会尝试打开或导航到拖入内容。
3、在 drop 事件中获取 e.dataTransfer.files，将其赋值给变量 files，后续处理方式与 input 方式完全相同。
4、可选地在 dragenter 时添加临时 CSS 类（如高亮边框），提供明确的拖拽反馈。
