FormData与FileAPI文件上传教程

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《FormData与File API上传文件方法详解》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

HTML5文件上传支持单/多文件、带字段及进度监控，核心方案为FormData配合XMLHttpRequest或Fetch，辅以FileReader预览、客户端校验等增强功能。

如果您需要在网页中实现文件上传功能，HTML5 提供了 FormData 与 File API 的组合方案，可支持单文件、多文件、带其他表单字段的异步上传。以下是几种具体实现方法：

一、使用 FormData + XMLHttpRequest 上传单个文件

该方法利用原生 XMLHttpRequest 发送包含文件的 FormData 对象，适用于对兼容性有明确控制且无需第三方库的场景。

1、在 HTML 中添加一个 type="file" 的 input 元素，并设置 multiple 属性为 false（默认）以限制单选。

2、监听 input 的 change 事件，通过 event.target.files[0] 获取第一个 File 对象。

3、创建 FormData 实例，调用 append 方法添加文件字段，例如 form.append('file', fileInput.files[0], fileInput.files[0].name)。

4、创建 XMLHttpRequest 实例，设置 onreadystatechange 回调，在 readyState === 4 且 status 在 200–299 范围内处理响应。

5、调用 xhr.open('POST', '/upload') 并执行 xhr.send(form)。

二、使用 FormData + Fetch API 上传多个文件

Fetch API 提供更简洁的 Promise 风格接口，配合 FormData 可自然支持多文件上传，每个文件作为独立条目追加至 FormData。

1、在 HTML 中使用 元素，并绑定 change 事件监听器。

2、在事件处理器中遍历 event.target.files，对每个 File 对象调用 form.append('files', file, file.name) —— 注意字段名保持一致以便后端统一接收数组。

3、调用 fetch('/upload', { method: 'POST', body: form }) 发起请求。

4、使用 .then() 处理 Response，调用 response.json() 或 response.text() 解析返回内容。

5、在 catch 块中捕获网络错误或 4xx/5xx 响应，注意：Fetch 不会因 HTTP 状态码异常而 reject，需手动检查 response.ok。

三、使用 FileReader 预览本地文件并上传

FileReader 可在上传前读取文件内容（如图片 Base64），实现客户端预览，同时仍通过 FormData 提交原始二进制数据。

1、为 input[type="file"] 添加 change 监听，获取 files[0]。

2、若为图片文件，创建 new FileReader() 实例，绑定 onload 事件，在其中将 e.target.result 赋值给 元素的 src 属性实现预览。

3、在 FileReader 的 onload 事件完成之后，再构造 FormData 并 append 同一 file 对象，确保上传的是原始文件而非 Base64 字符串。

4、使用 XMLHttpRequest 或 Fetch 发送 FormData，切勿将 FileReader 的 result（字符串）作为文件内容 append 到 FormData。

四、上传时携带额外字段与进度监控

FormData 支持同时附加文本字段与文件字段，结合 XMLHttpRequest.upload.onprogress 可实时反馈上传进度。

1、创建 FormData 实例后，依次调用 form.append('username', 'alice')、form.append('description', 'test upload') 等添加非文件字段。

2、继续调用 form.append('file', fileInput.files[0]) 添加文件字段。

3、创建 XMLHttpRequest 实例，监听 xhr.upload.onprogress 事件，从 event.loaded 和 event.total 计算百分比。

4、将计算出的进度值更新至页面中的 元素或自定义进度条 DOM 节点。

5、注意：onprogress 仅在 xhr.upload 上可用，xhr.onprogress 无效且不触发。

五、处理文件类型与大小校验（客户端前置过滤）

在文件进入上传流程前，可通过 File API 的属性进行轻量级校验，避免无效请求消耗服务端资源。

1、从 event.target.files 获取 FileList 后，遍历每个 File 对象。

2、检查 file.type 是否匹配允许的 MIME 类型，例如 file.type.startsWith('image/') 或精确比对 'application/pdf'。

3、检查 file.size 是否小于设定阈值（如 5 * 1024 * 1024 表示 5MB），注意：size 单位为字节，且无法通过 JS 修改。

4、对不满足条件的文件，调用 alert 或向用户展示提示信息，并跳过 append 操作。

5、若所有文件均校验失败，则阻止后续上传逻辑执行，该校验不可替代服务端验证，仅作用户体验优化。

文中关于HTML5的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《FormData与FileAPI文件上传教程》文章吧，也可关注golang学习网公众号了解相关技术文章。