jQuery 实现下载进度条

//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) + "%"); } } 

 

相关文章