首先使用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，便于处理异步逻辑。
立即学习“前端免费学习笔记（深入）”；
本文档主要讲述的是Sencha touch 开发指南；主要介绍如何使用Sencha Touch为手持设备进行应用开发，主要是针对iPhone这样的高端手机，我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app，用户界面组件和数据管理全部基于HTML5和CSS3的web标准，全面兼容Android和Apple iOS。希望本文档会给有需要的朋友带来帮助；感兴趣的
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目前不支持上传进度事件。
