xhr可用于下载，XMLHttpRequest本身的progress事件可以用来监测下载进度。xhr.onprogress是AJAX下载进度监测事件xhr.upload.onprogress是AJAX上传进度监测事件，必须写在send之前

    XMLHttpRequest使用readystatechange事件探测HTTP请求的完成有以下6个进度事件

    　　loadstart:在接收到响应数据的第一个字节时触发

    　　progress:在接收响应期间持续不断地触

    　　error:在请求发生错误时触发

    　　abort:在因为调用abort()方法而终止连接时触发

    　　load:在接收到完整的响应数据时触发

    　　loadend:在通信完成或者触发error、abort或load事件后触发

    　　timeout:超时发生时触发

    　　[注意]IE9-浏览器不支持以上事件(IE9浏览器仅支持load事件)

    　　每个请求都从触发loadstart事件开始，接下来，通常每隔50毫秒左右触发一次progress事件，然后触发load、error、abort或timeout事件中的一个，最后以触发loadend事件结束

    　　对于任何具体请求，浏览器将只会触发load、abort、timeout和error事件中的一个。XHR2规范草案指出一旦这些事件中的一个发生后，浏览器应该触发loadend事件

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5.     <title>XMLHttpRequest上传文件进度实现</title>
    6.     <script type="text/javascript">
    7.         var xhr;
    8.         var ot;//
    9.         var oloaded;
    10.         //上传文件方法
    11.         function UpladFile() {
    12.             var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
    13.             var url = "uploadFile"; // 接收上传文件的后台地址 
    15.             var form = new FormData(); // FormData 对象
    16.             form.append("mf", fileObj); // 文件对象
    18.             xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
    19.             xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    20.             xhr.onload = uploadComplete; //请求完成
    21.             xhr.onerror =  uploadFailed; //请求失败
    22.             xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
    23.             xhr.upload.onloadstart = function(){//上传开始执行方法
    24.                 ot = new Date().getTime();   //设置上传开始时间
    25.                 oloaded = 0;//设置上传开始时，以上传的文件大小为0
    26.             };
    27.             xhr.send(form); //开始上传，发送form数据
    28.         }
    29.         //上传进度实现方法，上传过程中会频繁调用该方法
    30.         function progressFunction(evt) {
    32.              var progressBar = document.getElementById("progressBar");
    33.              var percentageDiv = document.getElementById("percentage");
    34.              // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
    35.              if (evt.lengthComputable) {//
    36.                  progressBar.max = evt.total;
    37.                  progressBar.value = evt.loaded;
    38.                  percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
    39.              }
    41.             var time = document.getElementById("time");
    42.             var nt = new Date().getTime();//获取当前时间
    43.             var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
    44.             ot = new Date().getTime(); //重新赋值时间，用于下次计算
    46.             var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b       
    47.             oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
    49.             //上传速度计算
    50.             var speed = perload/pertime;//单位b/s
    51.             var bspeed = speed;
    52.             var units = 'b/s';//单位名称
    53.             if(speed/1024>1){
    54.                 speed = speed/1024;
    55.                 units = 'k/s';
    56.             }
    57.             if(speed/1024>1){
    58.                 speed = speed/1024;
    59.                 units = 'M/s';
    60.             }
    61.             speed = speed.toFixed(1);
    62.             //剩余时间
    63.             var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
    64.             time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
    65.                if(bspeed==0)
    66.                 time.innerHTML = '上传已取消';
    67.         }
    68.         //上传成功响应
    69.         function uploadComplete(evt) {
    70.          //服务断接收完文件返回的结果
    71.          //    alert(evt.target.responseText);
    72.              alert("上传成功！");
    73.         }
    74.         //上传失败
    75.         function uploadFailed(evt) {
    76.             alert("上传失败！");
    77.         }
    78.           //取消上传
    79.         function cancleUploadFile(){
    80.             xhr.abort();
    81.         }
    82.     </script>
    83. </head>
    84. <body>
    85.     <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
    86.     <span id="percentage"></span><span id="time"></span>
    87.     <br /><br />
    88.     <input type="file" id="file" name="myfile" />
    89.     <input type="button" onclick="UpladFile()" value="上传" />
    90.     <input type="button" onclick="cancleUploadFile()" value="取消" />
    91. </body>
    92. </html>