在使用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%可得到百分比。
沒有留言:
張貼留言