您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
ajax实现切片上传进度条
发布时间：2016-09-04 19:53:03编辑：雪饮阅读（）
上次雪饮分享了ajax实现大文件的切片上传，当时并没有实现切片上传的同时拥有进度条。前端是给用户看的，用户体验才是王道。进度条也是不能轻易避免的。当时间允许的情况下尽量还是要把前端完善好的。
在ajax同步的情况下实现进度条是非常麻烦的，这里涉及到了浏览器的渲染与javascript进程方面的相关知识。但是若是ajax异步就会导致后端php对文件的合并比较麻烦，最终还是选择了前端的处理，毕竟后端的处理比较耗费服务器端性能。
demo-前端：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
/*
*/
var xhr=new XMLHttpRequest();
var clock=null;
function fire(){
clock=window.setInterval(sendfile,1000);
}
//闭包计数器
var sendfile=(
function(){
const LENGTH=10*1024*1024;//每次切10M
var sta=0;
var end=sta+LENGTH;
var sending=false;//初始化标志上传状态为“未上传”
var blob=null;
var fd=null;
//百分比
var percent=0;
return(function () {
if(sending==true){return;}//判断切片文件正在上传则直接返回
var mov=document.getElementsByName("mov")[0].files[0];
//如果sta>move.size就结束了
if(sta>mov.size){clearInterval(clock);return;}//已经超过了所选文件总大小，所以不能继续进行切片上传了
blob=mov.slice(sta,end);
fd=new FormData();
fd.append('part',blob);
up(fd);
sta=end;
end=sta+LENGTH;
sending=false;//本次切片（10M）上传完了
percent=100*end/mov.size;
if(percent>100){percent=100;}
document.getElementById("bar").style.width=percent+'%';
document.getElementById("bfb").innerHTML=percent+'%';
});
})();
function up(fd){
xhr.open('POST','Untitled-2.php',false);
xhr.send(fd);
}
</script>
<style type="text/css">
#progress{
width:500px;
height:30px;
border:1px solid green;
}
#bar{
width:0%;
height:100%;
background:green;
}
#bfb{
float:right;
text-align:center;
color:pink;
}
</style>
</head>
<body>
<h1>html5大文件切割上传</h1>
<div id="progress">
<div id="bar"></div>
<div id="bfb"></div>
</div>
<input type="file" name="mov" onChange="fire();" />
</body>
</html>
关键字词：ajax,切片上传,进度条
上一篇：原生ajax实现大文件切片上传