JavaScript文件上传方法及用户处理技巧

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript如何上传文件？用户文件处理方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

用 <input type="file"> 拿到用户选中的文件

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

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

• multiple 属性允许选多个文件：<input type="file" 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 保持一致（后端按同名字段接收数组）：

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，但无法获知上传进度

处理常见错误和边界情况

用户选了文件不等于能上传成功。以下问题必须在前端拦截或提示：

• file.size === 0：空文件，可能是误点或生成失败，建议直接拒绝
• file.type 为空字符串：部分本地文件（如桌面拖入的无扩展名文件）可能无 MIME 类型，不能只依赖它校验格式
• 超大文件未分片：直接传几百 MB 易被浏览器中断或服务端拒绝，应提前 if (file.size > 50 * 1024 * 1024) 提示分卷上传
• 重复上传同一文件：可用 file.name + file.size + file.lastModified 做简易指纹，避免误操作重发
• 移动端 capture 拍照后可能旋转异常：这不是上传问题，但常被一起遇到——需用 EXIF.js 或 canvas 旋转修复，不在上传流程内处理

真正上传失败的原因往往藏在响应体里，比如后端返回 {"code":401,"msg":"token expired"}，前端要解析 responseText 而不只是看状态码。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~