HTML5 仅用于文件选择，上传需JS配合后端；常见问题包括缺multiple属性、accept格式错误、CSS隐藏未透传点击、iOS对capture的特殊限制；JS通过监听change事件获取FileList，用FormData上传；大文件需XMLHttpRequest监听进度，并调整Nginx及后端配置；前后端均须校验文件。
HTML5 的 <input type="file"> 本身不直接上传文件，它只负责选择文件；上传必须配合 JavaScript（如 fetch 或 XMLHttpRequest）和后端接口才能完成。
为什么点击 <input type="file"> 没反应或选不了多个文件？
常见原因是属性缺失或限制不当：
-
multiple属性没加 → 只能选一个文件，加了才支持多选：<input type="file" multiple> -
accept写错格式 → 比如想限制图片但写成accept="image/*"（正确），写成accept="jpg,png"就无效（缺少image/前缀） - 被 CSS 隐藏又没透传点击 → 用
display: none隐藏后未通过label或 JS 触发click()，会导致实际无法唤起选择框 - 移动端 iOS Safari 对
capture支持较特殊 →capture="camera"在部分 iOS 版本仅对image/*有效，视频需用video/*显式声明
怎么用 JavaScript 读取选中的文件并上传？
核心是监听 change 事件，拿到 input.files（FileList 对象），再用 FormData 构造请求体：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const files = e.target.files;
if (!files.length) return;
<p>const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files', files[i]); // 后端接收字段名通常是 'files' 或 'file'
}</p><p>try {
const res = await fetch('/upload', {
method: 'POST',
body: formData
});
console.log(await res.json());
} catch (err) {
console.error('上传失败:', err);
}
});注意：FormData.append() 第二个参数必须是 File 对象（来自 files[i]），不能传路径字符串或 blob.slice() 后未重命名的 Blob。
立即学习“前端免费学习笔记（深入）”；
上传大文件时卡顿、没进度、被中断怎么办？
原生 fetch 不支持上传进度监听，必须换用 XMLHttpRequest；另外服务端超时、Nginx 默认 1MB 上传限制、浏览器内存压力都可能造成失败：
- 用
XHR.upload.onprogress获取进度：xhr.upload.onprogress = (e) => { console.log((e.loaded / e.total * 100).toFixed(1) + '%'); }; - 后端需明确处理分片或流式接收（如 Node.js 的
busboy，PHP 的$_FILES有大小限制） - Nginx 需调大
client_max_body_size，例如设为100m - 避免一次性读取大文件到内存：不要用
FileReader.readAsDataURL()处理 >5MB 文件，改用readAsArrayBuffer()或直接 append 到 FormData
真正容易被忽略的是：前端校验（如文件类型、大小）只是体验优化，后端必须重新校验；accept 和 type 属性完全可被绕过，用户修改 HTML 或用 curl 就能传任意文件。
