JavaScript 如何做文件上传

在日常上网时，你肯定做过不少文件上传的操作：比如给工作群传照片、在网站上传简历、给小程序提交作业，这些看似简单的动作，背后都有JavaScript在帮忙实现。很多人以为文件上传是后端的事儿，其实前端的JavaScript是连接你选的文件和服务器的关键环节，今天就用生活化的例子，把这个过程拆解开讲明白。

第一步：先准备好「选文件的入口」

要上传文件，首先得让用户能选到文件，这就需要用到HTML里的一个特殊标签：<input type="file">。你可以把它理解成一个「带文件选择功能的按钮」，点一下就会弹出手机或电脑的文件管理器，让你挑要上传的内容。

举个例子，你在某个求职网站上传简历，页面上的「上传简历」按钮，其实就是这个标签变的。为了让它更符合需求，我们还能给它加一些小限制：比如只允许选图片，就加个accept="image/*"；允许选多个文件，就加个multiple属性。写出来的代码像这样：

`html

<!-- 只允许选图片，可多选 -->

<input type="file" id="fileInput" accept="image/*" multiple>

`

这一步的核心是，让JavaScript能拿到用户选的文件，所以我们给这个输入框加了个id，方便后面用代码找到它。

第二步：用JavaScript拿到用户选的文件

选好文件后，得用代码把文件拿到手，才能传给服务器。这时候就要用到JavaScript的事件监听：给刚才的input标签加个「选完文件就触发」的动作。

还是用上传头像举例：你点选好头像后，页面要先显示头像预览，这就需要拿到文件。代码逻辑是：先找到那个id为fileInput的元素，再监听它的change事件（也就是选完文件后触发），然后通过e.target.files拿到文件列表——这个列表就像你装了好几张照片的文件夹，里面每个文件都有名字、大小、类型这些信息。

比如你选了两张照片，files里就有两个对象，分别对应这两张图。如果只选一个，那列表里就只有一个元素。这里要注意，files是个类数组的对象，要用Array.from把它转成真正的数组，方便后面处理。

第三步：把文件打包成能传给服务器的格式

拿到文件后，不能直接把文件扔给服务器，得先打包成浏览器和服务器都能认的格式，这就要用到FormData对象，你可以把它理解成「快递打包盒」，要寄的文件就是里面的东西，还能在盒上贴备注（比如告诉服务器这是头像还是简历）。

比如要上传刚才选的照片，打包的代码很简单：

`javascript

// 先创建一个打包盒

const formData = new FormData();

// 把第一个文件放进盒子，备注写"avatar"

formData.append('avatar', fileList[0]);

`

如果要传多个文件，就多写几次append，或者循环把所有文件加进去，就像把好几样东西都放进同一个快递盒里。

第四步：把打包好的内容传给服务器

最后一步，就是用JavaScript的fetch（或者老一点的XMLHttpRequest）把打包好的内容发到服务器。这就像你把快递交给快递员，快递员会把东西送到对应的地址。

比如用fetch上传的代码：

`javascript

fetch('/upload', {

method: 'POST', // 告诉服务器我们要发新数据

body: formData // 把打包好的内容放进去

})

.then(response => response.json()) // 等服务器回应

.then(data => {

console.log('上传成功啦！', data);

})

.catch(error => {

console.log('上传出错啦！', error);

});

`

这里的/upload就是服务器接收上传的地址，就像快递的收件地址。

最后提醒大家几个实用的小细节：比如上传前可以检查文件大小，别让用户传超过10MB的头像；还要检查文件类型，禁止用户传exe这类危险文件，这些都是JavaScript可以轻松做到的，能避免很多不必要的麻烦。整个过程其实就是「让用户选文件→拿到文件→打包文件→发给服务器」，是不是比想象中简单多了？