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、将计算出的进度值更新至页面中的
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上传文件【方法】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606521.html
微信扫一扫 
支付宝扫一扫 
