jQuery监听文件上传实现进度条效果

原理：

给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程

var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){}

因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法
所以只要给jquery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现
首先封装一个方法 传入一个监听函数 返回一个绑定了监听函数的XMLHttpRequest对象

var xhrOnProgress=function(fun) {    xhrOnProgress.onprogress = fun; //绑定监听    //使用闭包实现监听绑    return function() {        //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象        var xhr = $.ajaxSettings.xhr();        //判断监听函数是否为函数        if (typeof xhrOnProgress.onprogress !== 'function')            return xhr;        //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去        if (xhrOnProgress.onprogress && xhr.upload) {            xhr.upload.onprogress = xhrOnProgress.onprogress;        }        return xhr;    }}

上传时使用$.ajax方法

$.ajax({    url: url,    type: 'POST',    xhr:xhrOnProgress(function(e){        var percent=e.loaded / e.total;//计算百分比    })});

使用HW.js文件上传工具 自带进度条效果 支持绑定自定义监听函数，支持上传实时预览（HTML5实现 无需服务器）HW.js

<div id="cover" class="HW_upload">请选择要上传的文件</div><script>var upload= new HW.Widget.upload.Create({    target:'#cover',//指定上传控件    url:"/upload.php",//上传地址    //设置允许上传的文件大小 单位为kb 默认为 4096    maxSize:2048,    //开启多文件上传    mult:false,    //设置上传按钮的文字    uploadText:'请选择要上传的文件',    //设置上传超时限制 单位为分钟 默认为20分钟    timeout:20,    //设置允许上传的文件类型 默认为['png','jpg','jpeg']    // accept:['jpg'],    //设置文件上传参数名 默认为HW_upload_input    inputName:'cover',    //设置控件为图片上传 默认为true 为false时则不开启文件预览    isImage:true,    //自定义文件检查函数 默认检测文件大小 类型    // fileCheck:function(file){return true;},    viewSize:[500,300],//设置图片预览框宽高 默认为400，300    viewImageWidth:70,//设置预览图片宽度默认为80    done:function(data){       alert(data);//获得上传结束后服务器返回的数据    }});

作者： Hacker丶wand
链接：http://www.imooc.com/article/5879
来源：慕课网