javascript如何实现文件上传_怎样处理用户选择的文件-js教程-PHP中文网

监听input file的change事件获取FileList，用FormData构建数据体并用XMLHttpRequest上传，注意校验空文件、类型限制、进度监听及响应解析。

javascript如何实现文件上传_怎样处理用户选择的文件

用拿到用户选中的文件

核心是监听 change 事件，从 event.target.files 中读取 FileList 对象。它不是数组，但可以用 [...files] 展开或用索引访问（比如 files[0]）。

注意：直接读取 files 是同步的，不涉及异步加载——这只是浏览器提供的本地引用，还没上传。

multiple 属性允许选多个文件：
accept 可限制类型（如 accept="image/*,.pdf"），但只是提示，不能替代服务端校验
files.length === 0 表示用户取消选择，需主动判断，否则容易误触发上传逻辑

用 `FormData` 构建上传数据体

这是最常用、兼容性好、支持二进制和字段混合提交的方式。不要手动拼 JSON.stringify() 或设置 Content-Type: application/json——那样传不了文件。

const formData = new FormData();
formData.append('file', file); // 单个文件
formData.append('description', '用户上传的截图'); // 额外字段
formData.append('category', 'report');

如果传多个文件，可循环追加，name 保持一致（后端按同名字段接收数组）：

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

for (const file of files) {
  formData.append('files', file); // 注意 name 是 'files'，不是 'file[]'
}

不用手动设 Content-Type 头——fetch 或 XMLHttpRequest 发送 FormData 时会自动设置为 multipart/form-data 并带上正确 boundary
避免对 FormData 再 JSON 序列化，否则会报错或传空
某些旧版 Safari 对大文件 append 有性能问题，可考虑分片前先做大小检查

用 `fetch` 发起上传并监听进度

fetch 本身不支持上传进度，得靠 XMLHttpRequest 的 upload.onprogress，或者用 ReadableStream + TransformStream（现代方案，但兼容性有限）。多数场景下，用 XMLHttpRequest 更稳妥。

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传中：${percent.toFixed(1)}%`);
  }
};
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status

xhr.upload 是上传专用对象，xhr.onprogress 是下载进度，别混淆
服务端返回非 2xx 状态码时，xhr.status 仍可读，但 xhr.onerror 不一定触发（比如 400、500 属于“成功收到响应”，走 onload）
若需 Abort，用 xhr.abort()；fetch 则需 AbortController，但无法获知上传进度