Ajax 文件上传进度监听之upload.onprogress案例详解
$.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <scri
### JavaScript 源代码：Ajax 文件上传进度监听之upload.onprogress案例详解
#### 一、概述
在Web开发中，文件上传是一项常见的功能需求。为了提高用户体验，开发者往往需要实现文件上传过程中的进度显示功能。这不仅可以提升用户体验，还能让用户在上传过程中了解当前的上传状态。本文将详细介绍如何使用jQuery和原生JavaScript实现Ajax文件上传进度监听。
#### 二、基本原理与技术栈
- **Ajax**：全称Asynchronous JavaScript and XML（异步JavaScript与XML），是一种创建交互式网页应用的技术。
- **XMLHttpRequest**：浏览器内置的一个对象，可以用于发送Ajax请求。
- **FormData**：一个可以用来存储键值对的对象，通常用于发送表单数据。
- **upload.onprogress**：一个事件处理器，当文件正在上传时，该事件会被触发，并可以通过`event.loaded`和`event.total`获取已上传的字节数和总字节数。
#### 三、案例分析
##### 3.1 jQuery实现
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Ajax 文件上传进度监听示例</title>
<script src="./libs/jquery/jquery.js"></script>
<style>
div {
width: 0%;
height: 20px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="progressBar"></div>
<input type="file" id="fileInput"/>
<script>
$(function () {
// 用户选择好文件之后单击弹出层的“打开”按钮的触发事件是：change
$('#fileInput').on('change', function () {
// 1. 收集文件数据
let myFile = this.files[0];
let formData = new FormData();
formData.append('file_data', myFile); // 将文件添加到FormData对象中
// 2. 发起Ajax请求
$.ajax({
url: 'http://127.0.0.1:3001/uploadFile',
type: 'POST',
data: formData,
processData: false, // 不要处理数据
contentType: false, // 不设置Content-Type
xhr: function () {
let newXhr = new XMLHttpRequest();
// 添加文件上传的监听
newXhr.upload.onprogress = function (e) {
console.log(e);
let percent = (e.loaded / e.total) * 100 + '%';
$('#progressBar').css('width', percent);
};
return newXhr;
},
success: function (res) {
console.log(res);
},
dataType: 'json'
});
});
});
</script>
</body>
</html>
```
1. **HTML结构**：包含一个文件输入框和一个用于显示进度条的`div`元素。
2. **CSS样式**：定义了进度条的样式。
3. **JavaScript逻辑**：
- 使用jQuery选择器`#fileInput`来获取用户选择的文件。
- 创建`FormData`对象并将文件数据附加到该对象中。
- 使用`$.ajax()`方法发送POST请求。
- 通过`xhr`选项自定义XMLHttpRequest实例，并在其`upload.onprogress`事件上绑定进度更新函数。
- 成功响应后，在控制台打印返回的结果。
##### 3.2 原生JavaScript实现
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Ajax 文件上传进度监听示例</title>
<script src="./libs/jquery/jquery.js"></script>
<style>
div {
width: 0%;
height: 20px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="progressBar"></div>
<input type="file" id="fileInput"/>
<script>
$(function () {
// 用户选择好文件之后单击弹出层的“打开”按钮的触发事件是：change
$('#fileInput').on('change', function () {
// 1. 收集文件数据
let myFile = this.files[0];
let formData = new FormData();
formData.append('file_data', myFile);
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:3001/uploadFile');
// 细节1：文件上传，如果使用FormData，则不要设置请求头
xhr.upload.onprogress = function (e) {
console.log(e);
let percent = (e.loaded / e.total) * 100 + '%';
$('#progressBar').css('width', percent);
};
// 细节2：send中可以直接传递FormData
xhr.send(formData);
});
});
</script>
</body>
</html>
```
1. **HTML结构**：与jQuery版本相同。
2. **JavaScript逻辑**：
- 创建新的`XMLHttpRequest`对象并配置请求。
- 在`xhr.upload.onprogress`事件上绑定进度更新函数。
- 调用`xhr.send()`方法发送请求。
#### 四、总结
本案例通过两种方式（jQuery和原生JavaScript）实现了Ajax文件上传进度监听的功能。通过监听`upload.onprogress`事件，我们可以在上传过程中实时更新进度条，为用户提供更好的交互体验。这两种方法都可以很好地满足文件上传的需求，并且可以根据项目的具体要求进行选择。
