html5怎么实现文件上传_HTML5文件API与FormData上传-html教程-PHP中文网

html5怎么实现文件上传_HTML5文件API与FormData上传

蓮花仙者

发布： 2025-10-20 10:29:01

原创

782人浏览过

HTML5通过File API和FormData实现文件上传，首先利用input选择文件，再用FileReader读取并预览图片，接着将文件添加到FormData对象中，最后通过XMLHttpRequest发送请求，支持进度监控与多字段提交，实现高效前端文件操作。

html5怎么实现文件上传_html5文件api与formdata上传

HTML5 提供了强大的文件操作能力，通过 File API 和 FormData，我们可以轻松实现前端文件选择、预览以及上传功能。这种方式无需依赖 Flash 或其他插件，兼容现代浏览器，是目前主流的文件上传方案。

使用 File API 获取本地文件

File API 允许网页访问用户本地文件，主要通过 input[type=file] 和 JavaScript 的 FileReader 对象来实现。

示例：获取用户选择的文件

<input type="file" id="fileInput" />
<script>
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);
  }
});
</script>

登录后复制

你可以通过 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 类型，并支持多文件上传。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

示例：将文件添加到 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);
<p>// 监听上传进度（可选）
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log('上传进度:', Math.round(percent) + '%');
}
};</p><p>// 上传完成
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功:', xhr.responseText);
} else {
console.error('上传失败:', xhr.statusText);
}
};</p><p>// 发送请求
xhr.send(formData);

登录后复制

完整示例：带进度条的文件上传

结合以上技术，实现一个简单的带进度提示的上传功能：

<input type="file" id="fileInput" />
<button onclick="uploadFile()">上传</button>
<div id="progress">进度：0%</div>
<p><script>
function uploadFile() {
const file = document.getElementById('fileInput').files[0];
if (!file) return alert('请选择文件');</p><p>const formData = new FormData();
formData.append('file', file);</p><p>const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload', true);</p><p>xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
document.getElementById('progress').textContent = '进度：' + Math.round(percent) + '%';
}
};</p><p>xhr.onload = function() {
if (xhr.status === 200) {
alert('上传成功！');
} else {
alert('上传失败：' + xhr.statusText);
}
};</p><p>xhr.send(formData);
}
</script>

登录后复制

基本上就这些。利用 HTML5 的 File API 和 FormData，你可以实现高效、灵活的文件上传功能，支持进度监控、多文件、图片预览等常见需求，且代码简洁易维护。

以上就是html5怎么实现文件上传_HTML5文件API与FormData上传的详细内容，更多请关注php中文网其它相关文章！