首先使用FormData与Ajax或Fetch API实现文件异步上传，通过HTML文件输入控件获取文件，JavaScript创建FormData对象并添加文件，再利用XMLHttpRequest或fetch发送POST请求至服务器；其次，为提升体验可监听上传进度，其中XMLHttpRequest支持onprogress事件显示进度，而Fetch暂不支持；需确保服务器接收multipart/form-data格式数据。
如果您需要将用户选择的文件通过异步请求上传到服务器，可以利用HTML5提供的File API与Ajax结合FormData对象来实现。这种方式能够避免页面刷新，并支持多种类型的文件传输。以下是具体的操作方式：
一、使用FormData与Ajax上传文件
通过JavaScript创建一个FormData实例，将文件输入框中选中的文件添加进去，再通过XMLHttpRequest或fetch发送请求。这种方法兼容现代浏览器并符合W3C标准。
1、在HTML中定义一个文件输入控件和上传按钮：
2、编写JavaScript函数，获取文件并使用FormData封装：
function uploadFile() {
const fileInput = document.getElementById(‘fileInput’);
const file = fileInput.files[0];
if (!file) {
alert(‘请选择一个文件’);
return;
}
const formData = new FormData();
formData.append(‘uploadedFile’, file);
3、使用XMLHttpRequest发送Ajax请求：
const xhr = new XMLHttpRequest();
xhr.open(‘POST’, ‘/upload’, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(‘上传成功:’, xhr.responseText);
}
};
xhr.send(formData);
}
确保服务器端接口支持multipart/form-data格式的数据接收。
二、使用Fetch API结合FormData上传
Fetch是现代JavaScript中更简洁的网络请求方式，相比XMLHttpRequest语法更清晰，且原生支持Promise，便于处理异步逻辑。
立即学习“前端免费学习笔记（深入）”；
1、同样获取文件输入元素并读取文件对象：
const fileInput = document.getElementById(‘fileInput’);
const file = fileInput.files[0];
if (!file) {
alert(‘请先选择文件’);
return;
}
2、创建FormData实例并将文件加入其中：
const formData = new FormData();
formData.append(‘uploadedFile’, file);
3、调用fetch方法发起POST请求：
fetch(‘/upload’, {
method: ‘POST’,
body: formData
})
.then(response => response.json())
.then(data => {
console.log(‘上传成功:’, data);
})
.catch(error => {
console.error(‘上传失败:’, error);
});
注意不要手动设置Content-Type头部，让浏览器自动根据FormData生成边界字符串。
三、添加进度监听功能
为了提升用户体验，可以在文件上传过程中显示上传进度。XMLHttpRequest提供了onprogress事件用于监控上传状态。
1、在发送请求前绑定上传进度事件：
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(‘上传进度:’, percentComplete.toFixed(2) + ‘%’);
}
};
2、可将进度信息更新至页面上的进度条或文本提示区域，增强交互反馈。
只有使用XMLHttpRequest时才能监听上传进度，fetch目前不支持上传进度事件。
以上就是html5文件如何通过Ajax进行上传 html5文件与FormData的结合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589325.html
微信扫一扫 
支付宝扫一扫 
