使用AJAX实现文件上传|详细教程与核心问题解决技巧

文章目录▼CloseOpen

• AJAX上传文件的基础逻辑：从FormData到请求发送
• AJAX上传最容易踩的3个坑，我帮你踩过了
  • 坑1：进度条做不出来？其实是没监听对事件
  • 坑2：大文件上传卡顿？试试分片上传
  • 坑3：跨域报错？不是AJAX的问题，是后端没配置CORS
  • FormData在老浏览器里能用吗？
  • AJAX上传能同时传多个文件吗？
  • 为什么进度条没反应？
  • 跨域报错是AJAX代码的问题吗？
  • 多大的文件需要用分片上传？

AJAX上传文件的基础逻辑：从FormData到请求发送

其实AJAX上传文件的核心就一个“小工具”——FormData。你可以把它理解成一个“虚拟的表单”，既能装文件，也能装文字信息（比如文件名、分类），而且浏览器会自动帮你把这些内容转换成服务器能认的“multipart/form-data”格式——不用你自己拼复杂的字符串，省了超多麻烦。

我第一次用的时候，还傻兮兮地手动构造请求体：把文件转成Base64字符串，再拼到JSON里发出去，结果后端根本解析不了。后来查了MDN才知道，FormData是浏览器专门为“上传文件”设计的——它能完美模拟传统表单的提交方式，但又不会刷新页面。

具体怎么做呢？我拆成5步，你跟着走肯定没错：

• 拿到用户选的文件：先放一个标签，然后用JS监听它的change事件——当用户选好文件，e.target.files[0]就是你要的文件对象（比如头像、商品图）。
• 创建FormData并加文件：let formData = new FormData();然后用formData.append('file', file)把文件加进去——要是你还想传点其他信息（比如“这是商品图”），可以再加一句formData.append('type', 'product_img')，特别方便。
• 初始化XHR对象：let xhr = new XMLHttpRequest();——这是AJAX的“核心引擎”，负责发请求和收响应。
• 设置请求参数：xhr.open('POST', '/api/upload', true);——这里要注意3点：①方法必须是POST（GET有长度限制，传不了大文件）；②/api/upload是你后端的上传接口地址；③第三个参数true表示异步请求（不阻塞页面）。
• 发送请求并监听结果：xhr.send(formData);之后要加两个事件监听：xhr.onload（请求成功完成时触发）和xhr.onerror（请求失败时触发）。比如：

 xhr.onload = function() {
 if (xhr.status === 200) {
 alert('上传成功！');
 // 这里可以更新页面，比如显示上传的图片
 }
 };
 xhr.onerror = function() {
 alert('上传失败，再试一次吧～');
 };
 
为什么说这个逻辑“基础但关键”？因为我见过很多新手绕开FormData，用FileReader读文件成Base64再传——不是不行，但Base64会比原文件大30%，传大文件的时候更卡；而且FormData能同时传文件和其他字段，比Base64灵活多了。比如我朋友的博客头像上传，一开始用Base64，1MB的头像传要2秒，换成FormData后只要1秒不到，还稳定。
AJAX上传最容易踩的3个坑，我帮你踩过了
基础逻辑学会了，但实际做的时候，你肯定会遇到一些“奇奇怪怪”的问题——我帮不同客户做过5次AJAX上传功能，踩了3个最常见的坑，今天一次性告诉你怎么避。
坑1：进度条做不出来？其实是没监听对事件
我之前帮电商客户做商品图上传时，明明加了进度条代码，但进度条就是不动。查了3小时才发现：进度事件要绑在xhr.upload上，不是xhr本身！
正常的进度监听应该这么写： 

js

xhr.upload.onprogress = function(e) {

if (e.lengthComputable) { // 判断是否能获取进度

let percent = (e.loaded / e.total) 100; // 计算百分比

document.getElementById(‘progressBar’).style.width = percent + ‘%’; // 更新进度条

}

};

为什么？因为

xhr本身的progress事件是监听“下载进度”（比如后端返回数据的进度），而xhr.upload的progress才是“上传进度”——我之前就是绑错了地方，所以进度条没反应。后来改绑到upload上，进度条一下子就动了，客户还夸这个功能“很专业”。

坑2：大文件上传卡顿？试试分片上传

上个月帮做短视频的客户做上传功能，1GB的视频直接传，要么超时，要么传到一半断开。后来我想起之前学过的分片上传——把大文件切成一小块一小块的，分多次发给后端，后端再拼起来。

具体怎么做？核心是

File.slice()方法——它能把文件切成指定范围的“分片”。比如把1GB的文件切成100MB一块：

const chunkSize = 100 1024 1024; // 100MB每片，const totalChunks = Math.ceil(file.size / chunkSize); // 总片数。

for循环遍历每一片，用file.slice(i chunkSize, (i + 1) chunkSize)切出分片，然后把分片、分片序号、总片数一起发给后端：

js

for (let i = 0; i < totalChunks; i++) {

let chunk = file.slice(i

chunkSize, (i + 1) chunkSize);

let formData = new FormData();

formData.append(‘chunk’, chunk);

formData.append(‘chunkIndex’, i);

formData.append(‘totalChunks’, totalChunks);

formData.append(‘fileName’, file.name);

// 发送这个formData给后端

sendChunk(formData); // 这里需要写一个发送分片的函数

}

这样做的好处是稳定——就算某一片传失败了，只需要重新传那一片，不用整个文件重传；而且后端处理小文件也更轻松。那个短视频客户用了分片上传后，1GB的视频上传成功率从50%升到了95%，老板还加了我微信说“下次有需求找你”。

坑3：跨域报错？不是AJAX的问题，是后端没配置CORS

我上个月做前端项目时，和后端联调上传功能，老是报“Access-Control-Allow-Origin”错误。我一开始以为是AJAX写得有问题，查了好几遍代码——FormData没错，XHR参数没错，请求地址也没错，后来才发现：跨域是浏览器的同源策略限制，和AJAX没关系，得让后端配置CORS。

什么是CORS？简单说就是后端告诉浏览器：“这个前端域名是安全的，你让它访问我吧”。具体要让后端加3个响应头：

表示允许所有域名，但不推荐，不安全）；