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]。

商易多用户商城

功能介绍：1. 商品出售包含拍卖模式，一口价模式。2. 全套系统采用淘宝网风格，成熟，简洁大方3. 每个商品支持多张图片上传，可自由设定，满足广大网民的迫切要求4. 商品信息支持 ubb,图文并茂5. 注册用户可参与竞拍，或者拍卖自己的商品6. 拥有会员注册，交易提醒，成交商品确认等邮件发送功能7. 拥有交易双方信用评价的功能，使得交易安全可*，可信度高8. 拥有安全稳定的用户虚拟币平台，可实现商

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与File API上传文件【方法】的详细内容，更多请关注php中文网其它相关文章！