HTML5文件上传实现教程

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML5文件上传实现方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

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

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

示例：将文件添加到 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);</p>

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

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

<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></p>

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

终于介绍完啦！小伙伴们，这篇关于《HTML5文件上传实现教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！