文件上传进度封装 - upload file with progress
方法:
/** * 带进度监控 - 文件上传 * @param url{string}: 上传路径 * @param form{dom}: 表单元素 * @param progress{function}: 进度回调 * @param success{function}: 上传完成回调 **/ function uploadFileWithProgress({url,form,progress,success}) { if(url && form) { var formData = new FormData(form), xhr = new XMLHttpRequest(); // 如果form元素没有消息头相关属性,需要设置xhr相关消息头 xhr.open('post',url); // 上传完成 xhr.onreadystatechange = function() { // readystate 为4表示请求已完成并就绪 if(this.readyState==4 && xhr.status==200) { var data = JSON.parse(xhr.responseText); if(success) success(data); } } // 检测上传进度 xhr.upload.onprogress = function(ev) { if(progress) progress(ev); } xhr.send(formData); } }
使用,如:
uploadFileWithProgress({ url: 'xxx/xxx.action', form: document.querySelector('#form_id'), progress: function(ev) { if(ev.lengthComputable) {
var percent = 100*ev.loaded/ev.total;
}
// todo }, success: function(data) { } })