1. HTML 文件上传的基本结构与语义
1.1 input[type="file"] 的核心
在网页中，上传控件的核心是 input 元素，type 属性设为 file，并通过 name 提交到服务端。若要支持多文件，需要添加 multiple。
例如，单文件上传和多文件上传在提交表单时的字段名与服务器端处理方式会有所不同，因此前端需要明确约定好字段的名称和数据结构。
同时，前端开发者应关注可访问性和样式，确保键盘导航、屏幕阅读器友好，以及在不同设备上的一致体验。
1.2 常见属性与搭配
常见属性包括 accept、multiple、capture（移动设备上快速调用相机或拍照选取图片）等。
通过合理组合，可以在对话框中提前过滤掉不符合要求的文件，提升用户体验。
示例代码如下：
2. accept 属性的正确使用
2.1 accept 的取值格式
accept 属性可以接受 MIME 类型 与 文件扩展名两种形式，推荐结合使用以兼容性与用户体验并重。
使用 MIME 类型优先，可以让浏览器在对话框中筛选出更精确的类型，而扩展名则在一些浏览器中提供额外的兼容性保障。
可用示例包括 accept="image/*,.png,.jpg"，或严格限定为 accept="image/png, image/jpeg"。
2.2 双重过滤策略：前端与服务端
虽然 accept 会在浏览器对话框中限制选择的文件，但它并不能阻止通过其他方式上传非许可格式的文件，因此必须在服务器端进行校验，以防止绕过前端控制。
在实现时，应结合前端的提示信息与后端的严格验证，确保安全性与可用性并存。
2.3 客户端提示信息与可访问性
在输入控件旁放置说明文本，告知用户允许的格式与大小限制，帮助无障碍用户理解允许的格式与限制，并提升整体可用性。
3. 客户端校验的要点
3.1 基于 File API 的大小与类型校验
通过 File API 获取每个选中的文件对象，检查 size、type、以及扩展名。本地筛选可以快速反馈给用户，但不能完全信任，因为浏览器实现和用户操作都可能导致绕过。
示例代码展示：对选中的文件进行初步校验，并在发现不符合时给予即时提示。
const input = document.getElementById('files');
const files = input.files;
for (const file of files) {// 大小校验，例如不超过 5MBif (file.size > 5 * 1024 * 1024) {console.warn('文件过大:', file.name);}// 类型校验，优先使用 MIME 类型if (!['image/png', 'image/jpeg'].includes(file.type)) {console.warn('不允许的图片格式:', file.name);}
}3.2 客户端校验的易错点
浏览器差异：不同浏览器对 type 的返回可能不完全一致，应以 mime type 为主进行判断，而对扩展名做辅助判断。
单一校验的风险：前端校验只是第一道防线，不能替代服务器端的校验，服务器端应再次验证所有上传的文件。
3.3 提供即时反馈与进度显示
通过前端事件，向用户展示文件数量、总大小、预计上传进度等信息，从而提升用户体验与交互性。渐进式反馈可以减少重复提交和用户焦虑。
在需要时，可以在前端预览部分图片，以便用户在提交前进行确认。
4. 服务器端校验的必要性与前端协同
4.1 服务器端的最终校验策略
服务器端应再次校验文件的 MIME 类型、扩展名、大小，以及实际内容的签名，确保不被客户端伪造。前端校验的要点只是第一道防线，服务器端的校验才是最终安全保障。
应结合白名单、黑名单、容量限制等策略，确保上传系统的安全性与稳定性。
4.2 通过 API 进行前后端协同的要点
前端与后端应约定统一的文件字段命名、错误响应格式，以及回调状态，以便在前端做出正确的提示与处理。一致的接口设计有助于实现可维护的文件上传流程。
在 API 层面，推荐将上传分为分片上传或单次上传两种模式，根据文件大小和网络条件进行动态选择，并在服务端进行整合与校验。
