在前面本人博客的基礎上，對進度條進行優化。
優化點：
之前的進度條過於真實，前端數據處理完成，沒有考慮後端數據是否處理完。這樣一旦後端出錯導致前端操作失敗，而前端進度條又走到底了，很容易給用戶錯誤的引導。
本次改進，前端進度條人爲設置最大值爲98%，直到收到後端處理完成的信息後，再將進度條走到100%。
之所以不在前面博客裏面修改而重新寫一篇文章，是因爲這篇博客中的做法需要後端同事配合。萬一你遇到的同事，死活不給你返回信息，你就只能退而求其次將就了。
正文
from
<form class='form-horizontal' id="myModal_add_form">
<div class='form-group'>
<label class='col-sm-2 control-label'>上傳圖像：</label>
<div class='col-sm-10'>
<input type="file" class="newFile"/>
<input type="hidden" name="newFileMsg" data-name=""/>
<input type="hidden" name="userId"/>
<input type="hidden" name="faceId"/>
</div>
</div>
<div class='form-group' style="display: none;" id="myModal_add_progressBar_Module">
<label class='col-sm-2 control-label'>上傳進度：</label>
<div class='col-sm-10'>
<div class="progress">
<div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" >
</div>
</div>
</div>
</div>
</form>
上傳關鍵js
//圖片上傳
$(".newFile").on('change', function(e){
var userName=$(this).parents(".modal-content").find("input[name='name']").val();
if(userName == ""){
parent.layer.msg("必須先填寫姓名！");
document.getElementById("myModal_add_form").reset();
return
}else{
if(Math.round(Number(e.currentTarget.files[0].size)/1024) > 10240){
parent.layer.msg("圖片太大，請壓縮大小後上傳！圖片最大 10 MB！");
document.getElementById("myModal_add_form").reset();
return
}else{
var activityId = $("#searchForm").find("select[name='activeId']").val();
var fileObj = e.currentTarget.files[0]; // js 獲取文件對象
var name = e.currentTarget.files[0].name;
$(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").attr("data-name",name);
var url="/faceRecognition/activityManage/uploadImg?name="+userName+"&activityId="+activityId;
var form = new FormData(); // FormData 對象
form.append("file", fileObj); // 文件對象
var xhr;
xhr = new XMLHttpRequest(); // XMLHttpRequest 對象
xhr.open("post", url, true); //post方式，url爲服務器請求地址，true 該參數規定請求是否異步處理。
xhr.onload = uploadComplete; //請求完成
xhr.onerror = uploadFailed; //請求失敗
xhr.upload.onprogress = progressFunction;//【上傳進度調用方法實現】
xhr.upload.onloadstart = function(){//上傳開始執行方法
ot = new Date().getTime(); //設置上傳開始時間
oloaded = 0;//設置上傳開始時，以上傳的文件大小爲0
};
xhr.send(form); //開始上傳，發送form數據
//顯示進度條
$("#myModal_add_progressBar_Module").css("display","block");
}
}
});
//上傳成功響應
function uploadComplete(evt){
//服務器接收完文件返回的結果
var res=JSON.parse(evt.target.responseText);
if(res.code == 0){
//上傳成功
$(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").val(res.data.url);
$(".newFile").parents("div.col-sm-10").find("input[name='userId']").val(res.data.id);
$(".newFile").parents("div.col-sm-10").find("input[name='faceId']").val(res.data.faceId);
//進度條設置爲100%；
$("#myModal_add_progressBar").css("width","100%");
$("#myModal_add_progressBar").html("100%");
}
}
//上傳失敗
function uploadFailed(evt){
parent.layer.msg("上傳失敗");
}
//上傳進度實現方法，上傳過程中會頻繁調用該方法
function progressFunction(evt) {
// event.total是需要傳輸的總字節，event.loaded是已經傳輸的字節。如果event.lengthComputable不爲真，則event.total等於0
if (evt.lengthComputable) {
//進度條限制 上傳時永遠不能達到100% 最大98% 除非收到後端返回值 才設置爲100%
$("#myModal_add_progressBar").css("width", Math.floor(evt.loaded / evt.total * 100)-2 + "%");
$("#myModal_add_progressBar").html(Math.floor(evt.loaded / evt.total * 100)-2 + "%");
}
var nt = new Date().getTime();//獲取當前時間
var pertime = (nt - ot) / 1000; //計算出上次調用該方法時到現在的時間差，單位爲s
ot = new Date().getTime(); //重新賦值時間，用於下次計算
var perload = evt.loaded - oloaded; //計算該分段上傳的文件大小，單位b
oloaded = evt.loaded;//重新賦值已上傳文件大小，用以下次計算
}