優(yōu)秀文章
開源中國：今天來找bug
相關(guān)框架
前臺：AngularJS帕识、Bootstrap
后臺：SpringMVC
思路整理
- 需求：大批量數(shù)據(jù)上傳導(dǎo)致用戶長時間等待肮疗，應(yīng)提供反饋信息扒接。
- 做法：數(shù)據(jù)從文件上傳至數(shù)據(jù)庫需先將文件讀取成可執(zhí)行插入操作數(shù)據(jù)，文件所含數(shù)據(jù)量過大碱呼，則讀取文件與插入數(shù)據(jù)均會產(chǎn)生較長的等待時間宗侦，因此逐步獲取對應(yīng)的操作進(jìn)度做出響應(yīng)（不考慮文件本身上傳時間）。
- 實現(xiàn)：根據(jù)文件所含數(shù)據(jù)總量和當(dāng)前獲取數(shù)據(jù)量計算讀取進(jìn)度姑裂，根據(jù)已插入數(shù)據(jù)量和數(shù)據(jù)總量可計算插入進(jìn)度舶斧，按照讀取和插入的效率劃分耗時比例求出真實進(jìn)度剑肯。
JS代碼
// 服務(wù)
$interval
// 屬性
$scope.uploadProgress = {};
$scope.uploadProgressFlag = false;
// 方法
$scope.upload = function() {
// 上傳實現(xiàn)代碼（略）
...
// 驗證進(jìn)度當(dāng)前狀態(tài)让网，此操作可實現(xiàn)主動取消上傳
if(!$scope.uploadProgressFlag){
// 標(biāo)記進(jìn)度開始狀態(tài)true
$scope.uploadProgressFlag = true;
// 初始化進(jìn)度值
$scope.uploadProgress.value = 0;
// 進(jìn)度開始
var start = $interval(function(){
// 首先判斷進(jìn)度是否取消決定是否主動結(jié)束
if(!$scope.uploadProgressFlag){
$interval.cancel(start);
// 初始化進(jìn)度值
$scope.uploadProgress.value = 0;
// 終止后臺上傳方法（略）
...
}else if($scope.uploadProgress.value<1){
$http.post('./xxxController/getProgress').success(
function(data) {
// 通過訪問后臺獲取當(dāng)前上傳真實進(jìn)度
$scope.uploadProgress.value = data;
}
);
}else{
// 進(jìn)度自然結(jié)束
$interval.cancel(start);
$scope.uploadProgressFlag = false;
}
}, 500);
}else{
// 若為開始狀態(tài)再次點擊則為取消false而账，此時值的改變可被已經(jīng)開始的進(jìn)度獲取從而停止進(jìn)度
$scope.uploadProgressFlag = false;
};
};
HTML代碼
ps：為實現(xiàn)想要的效果（進(jìn)度填充選擇文件的輸入框）泞辐，特請我的伙伴給予的樣式調(diào)整竞滓。
<div class="row">
<div class="col-md-4">
<div ng-class="{progress: true, 'progress-striped': true}" class="custom-progress">
<div ng-class="['progress-bar', 'progress-bar-info']" ng-style="{width: uploadProgress.value*100 +'%'}"></div>
<div class="custom-progress-text">{{uploader.queue[0].file.name}}</div>
</div>
</div>
<div class="col-md-3">
<input type="file" id="stFile" nv-file-select="" uploader="uploader" ng-click="clear()" ng-show="false"/>
<button class="btn btn-primary" ng-if="uploader" onclick="javascript:$('#stFile').click()">選擇文件</button>
<button type="button" class="btn btn-primary" ng-if="!uploadProgressFlag" ng-click="upload()">導(dǎo)入</button>
<button type="button" class="btn btn-primary" ng-if="uploadProgressFlag" ng-click="upload()">取消</button>
</div>
</div>
實現(xiàn)效果
ps：進(jìn)度條左上的狀態(tài)和右上的百分比均可在每次獲取進(jìn)度的同時進(jìn)行屬性賦值進(jìn)而實現(xiàn)動態(tài)改變的效果锯茄。
進(jìn)度條.png
最后
- 大批量數(shù)據(jù)上傳需使用事務(wù)管控肌幽；
- 導(dǎo)入操作若分多個方法（讀喂急、寫）則按比重劃分每個方法進(jìn)度比例進(jìn)而計算出實際進(jìn)度廊移；
- 終止上傳應(yīng)考慮后臺各方法的主動終止情況探入；
