HTML5通过File API和FormData实现文件上传，首先利用input选择文件，再用FileReader读取并预览图片，接着将文件添加到FormData对象中，最后通过XMLHttpRequest发送请求，支持进度监控与多字段提交，实现高效前端文件操作。
HTML5 提供了强大的文件操作能力，通过 File API 和 FormData，我们可以轻松实现前端文件选择、预览以及上传功能。这种方式无需依赖 Flash 或其他插件，兼容现代浏览器，是目前主流的文件上传方案。
使用 File API 获取本地文件
File API 允许网页访问用户本地文件，主要通过 input[type=file] 和 JavaScript 的 FileReader 对象来实现。
示例：获取用户选择的文件
document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; // 获取第一个选中文件 if (file) { console.log('文件名:', file.name); console.log('文件大小:', file.size); console.log('MIME类型:', file.type); }});
你可以通过 FileReader 实现图片预览：
立即学习“前端免费学习笔记（深入）”；
const reader = new FileReader();reader.onload = function(e) { const preview = document.createElement('img'); preview.src = e.target.result; document.body.appendChild(preview);};reader.readAsDataURL(file);
使用 FormData 构建上传数据
FormData 是 HTML5 提供的一个对象，用于模拟表单数据，特别适合异步上传文件。
它可以自动处理 MIME 类型，并支持多文件上传。
示例：将文件添加到 FormData 并上传
const formData = new FormData();formData.append('avatar', file); // 'avatar' 是后端接收字段名formData.append('username', 'john'); // 可同时上传其他字段
通过 XMLHttpRequest 发送文件
使用 XMLHttpRequest（XHR）发送 FormData 数据是最常见的做法。
示例：上传文件到服务器
const xhr = new XMLHttpRequest();xhr.open('POST', '/upload', true);// 监听上传进度（可选）xhr.upload.onprogress = function(e) {if (e.lengthComputable) {const percent = (e.loaded / e.total) * 100;console.log('上传进度:', Math.round(percent) + '%');}};
// 上传完成xhr.onload = function() {if (xhr.status === 200) {console.log('上传成功:', xhr.responseText);} else {console.error('上传失败:', xhr.statusText);}};
// 发送请求xhr.send(formData);
完整示例：带进度条的文件上传
结合以上技术，实现一个简单的带进度提示的上传功能：
进度：0%function uploadFile() {const file = document.getElementById('fileInput').files[0];if (!file) return alert('请选择文件');
const formData = new FormData();formData.append('file', file);
const xhr = new XMLHttpRequest();xhr.open('POST', '/api/upload', true);
xhr.upload.onprogress = function(e) {if (e.lengthComputable) {const percent = (e.loaded / e.total) * 100;document.getElementById('progress').textContent = '进度：' + Math.round(percent) + '%';}};
xhr.onload = function() {if (xhr.status === 200) {alert('上传成功！');} else {alert('上传失败：' + xhr.statusText);}};
xhr.send(formData);}
基本上就这些。利用 HTML5 的 File API 和 FormData，你可以实现高效、灵活的文件上传功能，支持进度监控、多文件、图片预览等常见需求，且代码简洁易维护。
以上就是html5怎么实现文件上传_HTML5文件API与FormData上传的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586598.html
微信扫一扫 
支付宝扫一扫 
