【重要】你不得不知道的文件上传进度提示
文章共905字，阅读大约需要11分钟。
需求
当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。
前提
- 请求是异步的。因为要实时获取到上传的进度，则请求需是异步的，如果是同步的话，会直到请求完成才能获取到响应。
实现
这里总结的主要是js方面，至于进度条的显示，有的UI框架，比如semantic就自带了进度条的实现，直接使用即可，没有的话也可以自己用改变div宽度等方式实现，这里不赘述。
如何获取到文件的上传进度？
Javascript的XMLHttpRequest提供了一个progress事件，这个事件会返回文件已上传的大小和总大小，根据这两个值，就可以计算上传进度了，关于这个方法，在《Javascript高级程序设计(第3版)》21章第3节中有叙述，有这本书在手的可以看一下。下面贴一下代码。
XMLHttpRequest:progress事件
使用Javascript的XMLHttpRequest的progress事件，实现示例代码为：
var formData = new FormData(); formData.append("file", document.getElementById('file').files[0]); formData.append("token", token_value); // 其他参数按这样子加入 var xhr = new XMLHttpRequest(); xhr.open('POST', '/uploadurl'); // 上传完成后的回调函数 xhr.onload = function () { if (xhr.status === 200) { console.log('上传成功'); } else { console.log('上传出错'); } }; // 获取上传进度 xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var percent = Math.floor(event.loaded / event.total * 100) ; // 设置进度显示 $("#J_upload_progress").progress('set progress', percent); } }; xhr.send(formData);
关于FormData和XMLHttpRequest, 可以搜下W3C了解详情。
jQuery封装的xhr
jQuery封装了xhr的实现, 也可以使用jQuery的ajax获得上传进度，示例代码：
var formData = new FormData(); formData.append("file", document.getElementById('file').files[0]); formData.append("token", token_value); $.ajax({ url: "/uploadurl", type: "POST", data: formData, processData: false, // 不要对data参数进行序列化处理，默认为true contentType: false, // 不要设置Content-Type请求头，因为文件数据是以 multipart/form-data 来编码 xhr: function(){ myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',function(e) { if (e.lengthComputable) { var percent = Math.floor(e.loaded/e.total*100); if(percent <= 100) { $("#J_progress_bar").progress('set progress', percent); $("#J_progress_label").html('已上传：'+percent+'%'); } if(percent >= 100) { $("#J_progress_label").html('文件上传完毕，请等待...'); $("#J_progress_label").addClass('success'); } } }, false); } return myXhr; }, success: function(res){ // 请求成功 }, error: function(res) { // 请求失败 console.log(res); } });
关于jQuery ajax的xhr, 具体可查看W3C。
另外一点，上传成功后设置重定向到网站某页面的话，可能会报错跨域重定向。
相关链接
阮一峰：文件上传的渐进式增强
jquery xhr upload属性包装
关于文件上传的那些事
html5上传进度实现
七牛文件上传303重定向
转自： https://segmentfault.com/a/1190000008791342 作者： bolelee