如何通过XMLHttpRequest实现文件上传进度条的显示？

本文共计298个文字，预计阅读时间需要2分钟。

XMLHttpRequest 实现上传进度条XMLHttpRequest 上传文件进度条实现若想使用jQuery，可利用其ajax方法实现jQuery的ajax方法没有关于progress事件的直接操作此时需调用XMLHttpRequest对象的progress事件

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