从用户的角度来说,非常希望能够看到传输的进度,所以在我们认为非常有必要加上文件上传的进度条。
关于文件上传进度的api,在原生js中有可以使用XMLHttpRequest的progress事件:
xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var percent = Math.floor(event.loaded / event.total * 100) ; // 设置进度显示 $("#J_upload_progress").progress('set progress', percent); } };
这样就可以获取到上传文件的进度了。
同时,如果使用jquery的话,可以使用xhr属性来实现:
$.ajax({ url:API.uploadFile, type:'POST', data:formData, dataType:"JSON", contentType:false, processData:false,//为了保证formData能传过去 ,不加会报错 success:function(data,state){ success(data,state)}, error:function(data,state){ failed(data,state)}, xhr:function () { this_xhr = $.ajaxSettings.xhr(); if(this_xhr.upload){ this_xhr.upload.addEventListener('progress',function(e){ if (e.lengthComputable) { var percent = Math.floor(e.loaded/e.total*100); if(percent <= 100) { console.log('set progress', percent); } if(percent >= 100) { console.log('文件上传完毕,请等待...'); } } },false) } } })
这样就可以监听upload方法的process来控制文件上传的进度条显示啦。
附上一个进度条的小组件:
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>