//ajax异步上传 ?????????????$.ajax({ ????????????????url: "${pageContext.request.contextPath }/upload", ????????????????type: "POST", ????????????????data: formData, ????????????????xhr: function(){ //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数 ?????????????????????????????????????myXhr = $.ajaxSettings.xhr(); ????????????????????if(myXhr.upload){ //检查upload属性是否存在 ????????????????????????//绑定progress事件的回调函数 ????????????????????????myXhr.upload.addEventListener(‘progress‘,progressHandlingFunction, false); ?????????????????????} ????????????????????return myXhr; //xhr对象返回给jQuery使用 ????????????????}, ????????????????success: function(result){ ????????????????????$("#result").html(result); ????????????????}, ????????????????contentType: false, //必须false才会自动加上正确的Content-Type ????????????????processData: false ?//必须false才会避开jQuery对 formdata 的默认处理 ????????????}); ?
//上传进度回调函数: ????????function progressHandlingFunction(e) { ????????????if (e.lengthComputable) { ????????????????$(‘#progress‘).attr({value : e.loaded, max : e.total}); //更新数据到进度条 ????????????????var percent = e.loaded/e.total*100; ????????????????$(‘#progress‘).html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%"); ????????????????$(‘#progress‘).css(‘width‘, percent.toFixed(2) + "%"); ??????????} ????????}
jQuery 实现下载进度条
原文地址:https://www.cnblogs.com/slightFly/p/10559254.html