html5传文件实现_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]。

标签： html5 html js json 处理器 app 字节 后端 pdf 状态码