使用Ajax实现带进度条的文件上传,使用jquery 实现
时间: 2024-03-07 09:49:32 浏览: 19
好的,下面是一个简单的示例代码:
HTML 文件:
```html
<form id="upload-form" enctype="multipart/form-data">
<input type="file" name="file" id="file-input">
<input type="submit" value="上传" id="submit-btn">
</form>
<div id="progress">
<div id="progress-bar"></div>
</div>
```
JavaScript 代码:
```javascript
$(document).ready(function() {
// 当表单提交时
$('#upload-form').submit(function(event) {
event.preventDefault();
// 获取要上传的文件
var file_data = $('#file-input').prop('files')[0];
// 创建一个 FormData 对象
var form_data = new FormData();
form_data.append('file', file_data);
// 发送 Ajax 请求
$.ajax({
url: '/upload',
type: 'POST',
data: form_data,
dataType: 'json',
processData: false,
contentType: false,
xhr: function() {
// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 监听上传进度
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
// 计算上传进度,更新进度条
var percent = Math.round((event.loaded / event.total) * 100);
$('#progress-bar').css('width', percent + '%');
}
}, false);
return xhr;
},
success: function(data) {
// 上传成功,处理服务器返回的数据
console.log(data);
},
error: function(xhr, status, error) {
// 上传失败,处理错误信息
console.log(error);
}
});
});
});
```
上面这段代码使用 jQuery 发送 Ajax 请求,创建了一个 FormData 对象来存储要上传的文件,并且设置了一些参数:
- `dataType: 'json'` 表示服务器返回的数据是 JSON 格式,jQuery 会自动解析 JSON 数据;
- `processData: false` 表示不要对 FormData 对象进行处理,让浏览器处理文件上传;
- `contentType: false` 表示不要设置 Content-Type 请求头,让浏览器自动设置;
- `xhr: function() {...}` 表示使用 XMLHttpRequest 对象来发送 Ajax 请求,并且监听上传进度。
在监听上传进度的回调函数中,计算上传进度并更新进度条的宽度。最后处理上传成功和上传失败的情况。