使用JQuery.ajax()上傳檔案時加入進度條

在使用jQuery.ajax()非同步上傳檔案時，可以利用在xhr屬性中加入ProgrssEvent的監聽器來達成上傳進度條(progress bar)的效果。

<style>
/* 進度條的css */
.progress {
  position:relative; 
  width:400px; 
  border: 1px solid #ddd; 
  padding: 1px; 
  border-radius: 3px; 
}
.bar { 
  background-color: #7cc7ee; 
  width:0%; 
  height:20px; 
  border-radius: 3px; 
}
.percent { 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
</style>
...
<form id="myForm">
  <table>
    <tr>
      <td><input type="file" name="file" id="file"/></td>
    </tr>
    <tr>
      <td><input name="submit" type="submit" value="submit" id="submit" /></td>
    </tr>
  </table>
</form>
<!-- 進度條 -->
<div class='progress' id="progress-div">
  <div class='bar' id='bar'></div>
  <div class='percent' id='percent'>0%</div>
</div>
 ...
<script>
$(function(){
  $("#myForm").submit(function(e){
    e.preventDefault();
    
    if($("#file").val() === ""){
      alert('請選擇上傳檔案');
      return;
    }

    var formData = new FormData($("#myForm")[0]);
    $.ajax({
      type: "POST",
      url: "upload",
      data:formData,
      cache:false,
      processData: false,
      contentType: false,
      dataType: 'text',   // 回傳的資料格式
      success: function (data){
        alert(data);
      },
      xhr:function(){
        var xhr = new window.XMLHttpRequest(); // 建立xhr(XMLHttpRequest)物件
        xhr.upload.addEventListener("progress", function(progressEvent){ // 監聽ProgressEvent
            if (progressEvent.lengthComputable) {
              var percentComplete = progressEvent.loaded / progressEvent.total;
              var percentVal = Math.round(percentComplete*100) + "%";
              $("#percent").text(percentVal); // 進度條百分比文字
              $("#bar").width(percentVal);    // 進度條顏色
            }
        }, false);
        return xhr; // 注意必須將xhr(XMLHttpRequest)物件回傳
      }
    }).fail(function(){
      $("#percent").text("0%"); // 錯誤發生進度歸0%
      $("#bar").width("0%");
    });
        
  });

}
</script>

ProgressEvent.lengthComputable為boolean值，用來表示進度是否能被計算，為true時ProgressEvent.total的值才存在。

ProgressEvent.loaded代表已完成的進度，ProgressEvent.total代表全部的進度，所以兩數相除在乘以100%可得到百分比。