实现异步上传的代码实例
时间: 2024-03-23 08:36:57 浏览: 74
下面是使用JavaScript实现异步上传的一个简单示例代码:
```
// HTML
<input type="file" id="fileUpload" />
// JavaScript
const fileInput = document.getElementById('fileUpload');
fileInput.addEventListener('change', function() {
const file = fileInput.files[0];
// 创建FormData对象
const formData = new FormData();
formData.append('file', file);
// 发送异步请求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.log('上传失败');
}
};
xhr.send(formData);
});
```
以上代码中,当用户选择文件后,会创建一个FormData对象,并将文件添加到其中。然后使用XMLHttpRequest对象发送POST请求,并将FormData作为参数发送。当上传完成后,通过xhr对象的onload事件处理程序来检查上传的状态,如果状态码是200,则表示上传成功。这个示例代码只是一个简单的实现,实际使用中还需要考虑错误处理、进度条显示等问题。
阅读全文