发布于 

ajax上传进度处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- 设置文件域和上传按钮 -->
<input type="file" id="ipt">
<button id="btn">按钮</button>

<div class="progress" style="width:500px; margin: 10px 0;">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width:0%">
0%
</div>
</div>
<script src="lib/jquery.js"></script>
<script>
// 按钮点击
$('#btn').on('click', function () {
// 获取文件内容
var files = $('#ipt')[0].files;
var fd = new FormData();
fd.append('file', files[0]);
// 设置原生ajax请求,进行上传进度设置(如果使用jQuery,直接取网上找插件即可)
// 1 基本的ajax步骤
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
// 2 上传进度检测
// - 上传中,onprogress事件会自动触发多次(具体次数不固定,取决于网速和文件大小)
// - 我自己测试的次数: 60k左右的图片,触发3次, 30M左右的视频,触发几十次
xhr.upload.onprogress = function (e) {
// - e.lengthComputable 表示是否具有可计算的文件大小
// - 布尔值,true表示文件可以使用
if (e.lengthComputable) {
// - e.total 上传文件的总大小
// - e.loaded 已上传大小
// - toFixed() 保留指定位小数
var bili = (e.loaded / e.total * 100).toFixed(2) + '%';
// 根据上传进度,设置具体功能
// - 设置进度条宽度和内容为比例
$('#percent').css('width', bili).text(bili);
}
};
// 3 上传完毕,修改显示效果
// upload.onload 事件会在上传操作完毕后触发
xhr.upload.onload = function () {
$('#percent').removeClass().addClass('progress-bar progress-bar-success');
};
xhr.send(fd);
});
</script>

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.