监控ajax上传进度

<div id="open_content" style="padding:20px;">
	   	<!-- 外层div 进度条的整体视觉和位置设置 -->
	    <div style="width:300px;height: 20px;border: 1px solid #CCC;">
	    <!-- 内层div  逐渐递增的进度条 -->
	        <div id="jdt" style="height: 20px;"></div>
	    </div>
	    <div style="margin-top:16px;">
	    	<p style="margin-top:16px;">总大小<span id="total"></span>；</p>
	    	<p style="margin-top:16px;">已上传<span id="loaded"></span>；</p>
	    </div><br>
   </div>

 

        $.ajax({
	            url: "${pageContext.request.contextPath}/base/add",
	            type: 'post',
	            cache: false,
	            data: formData,
	            processData: false,
	            contentType: false,
	            async : true,//这一步很重要，必须同步，异步监测不到
	            success: function (data) {
	            	
	            },
                    xhr: xhrOnProgress(function(evt){
	                var percent = Math.floor(evt.loaded / evt.total*100);//计算百分比
	                console.log(percent);
	                // 设置进度条样式
	                $('#jdt').css('width',percent * 3 + 'px');
	                $('#jdt').css('background','skyblue');
	                //显示进度百分比
	                $('#jdt').text(percent+'%');
	                $('#loaded').text(evt.loaded/1024 + 'K');
	                $('#total').text(evt.total/1024 + 'K');
	            }),
	            error: function(){
	            	
	            },
	            beforeSend: function(){
	            	
	            }
	        });

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;
        }
    }