带进度条的文件上传 使用Ajax实现上传文件的进度,要求使用JQuery来实现。
时间: 2024-03-03 21:49:01 浏览: 23
好的,可以通过以下步骤来实现带进度条的文件上传:
1. HTML代码:创建一个表单,并添加一个文件输入框和一个提交按钮。
```html
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput">
<button type="submit" id="uploadButton">上传</button>
</form>
```
2. JQuery代码:使用JQuery的ajax()方法来上传文件,并使用XHR对象来跟踪上传进度。
```javascript
$(function() {
// 监听表单提交事件
$('#uploadForm').submit(function(e) {
e.preventDefault(); // 阻止默认提交行为
// 创建FormData对象,用于将文件数据添加到请求中
var formData = new FormData();
formData.append('file', $('#fileInput')[0].files[0]);
// 创建XHR对象,用于跟踪上传进度
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
$('#progressBar').width(percentComplete + '%');
$('#progressBarText').text(percentComplete.toFixed(0) + '%');
}
}, false);
// 发送文件上传请求
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() { return xhr; }, // 将XHR对象传递给ajax()方法
success: function(response) {
// 上传成功后的处理逻辑
},
error: function(xhr, status, error) {
// 上传失败后的处理逻辑
}
});
});
});
```
3. CSS代码:创建一个进度条样式,用于显示上传进度。
```css
#progressBarContainer {
width: 100%;
height: 20px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
#progressBar {
width: 0%;
height: 100%;
background-color: #4CAF50;
transition: width 0.5s ease-in-out;
}
#progressBarText {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 20px;
text-align: center;
font-size: 14px;
color: #fff;
}
```
4. HTML代码:在表单上方添加一个进度条容器。
```html
<div id="progressBarContainer">
<div id="progressBar"></div>
<div id="progressBarText">0%</div>
</div>
```
这样就可以实现带进度条的文件上传了。在上传过程中,进度条会实时更新,显示上传进度。