1、使用FormData与XMLHttpRequest可实现异步文件上传，避免页面刷新；2、Fetch API结合FormData提供更现代的异步上传方式，语法简洁且支持Promise；3、通过表单直接提交可实现同步上传，适用于基础场景；4、利用HTML5拖放API可实现拖拽上传功能，提升用户体验。
如果您需要实现用户通过网页上传文件的功能，可以使用HTML5提供的原生文件API和表单特性来完成。以下是几种常见的代码实现方法，帮助您构建高效、安全的文件上传功能：
一、使用FormData与XMLHttpRequest实现异步上传
该方法利用FormData对象收集文件数据，并通过XMLHttpRequest发送到服务器，避免页面刷新，提升用户体验。
1、在HTML中创建一个带有文件输入框和上传按钮的表单：
立即学习“前端免费学习笔记（深入）”；
2、编写JavaScript函数，获取文件并使用FormData封装：
const file = document.getElementById(‘fileInput’).files[0];
if (!file) return alert(“请选择一个文件”);
3、创建FormData实例并将文件添加进去：
const formData = new FormData();
formData.append(‘uploaded_file’, file);
4、使用XMLHttpRequest发送POST请求：
const xhr = new XMLHttpRequest();
xhr.open(‘POST’, ‘/upload’, true);
xhr.send(formData);
二、使用Fetch API结合FormData上传文件
Fetch API提供更现代的网络请求方式，语法简洁且支持Promise，适合处理异步操作。
1、定义文件输入元素并绑定事件或按钮触发上传：
2、在脚本中获取文件并验证是否存在：
const selectedFile = document.getElementById(‘fileSelect’).files[0];
if (!selectedFile) { alert(“未选择文件”); return; }
3、创建FormData对象并附加文件数据：
const formPayload = new FormData();
formPayload.append(‘file’, selectedFile);
4、调用fetch函数向服务端提交文件：
fetch(‘/upload’, {
method: ‘POST’,
body: formPayload
})
.then(response => response.json())
.then(data => console.log(‘上传成功:’, data))
.catch(error => console.error(‘上传失败:’, error));
三、通过表单直接提交实现同步上传
此方法不依赖JavaScript，适用于基础场景或需要降级支持的环境，上传后会刷新页面。
1、设置form标签的enctype为multipart/form-data，确保文件能被正确编码：
以上就是HTML5文件上传：处理用户上传文件的代码实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576877.html
微信扫一扫 
支付宝扫一扫 
