XMLHttpRequest实现上传进度条

XMLHttpRequest实现上传进度条

若想用jQuery 中的ajax实现的话，jQuery的 ajax 方法没有关于 progress 事件的操作，此时需要调用的XMLHttpRequest对象是指定progress 事件。

$.ajax({
    type: "POST",
　　url: "upload",
　　data: formData ,　　//这里上传的数据使用了formData 对象
　　processData : false, 
　　//必须false才会自动加上正确的Content-Type 
　　contentType : false , 
　　　　
　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
　　xhr: function(){
　　　　var xhr = $.ajaxSettings.xhr();
　　　　if(onprogress && xhr.upload) {
　　　　　　xhr.upload.onprogress = progressFunction;
 　　　　　 return xhr;
 　　　 }
 　 }
});

XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。 它分成上传和下载两种情况 １）下载的progress事件属于XMLHttpRequest对象 ２）上传的progress事件属于XMLHttpRequest.upload对象。 下载进度实现：

xhr.onprogress = downloadProgress;
function downloadProgress(event) {//未测试
    if(event.lengthComputable) {
        var percentComplete = event.loaded / event.total; 
    }
}