数据上传的实时进度显示【进度条】

优秀文章

开源中国：今天来找bug

---

相关框架

前台：AngularJS、Bootstrap
后台：SpringMVC

---

思路整理

• 需求：大批量数据上传导致用户长时间等待，应提供反馈信息。
• 做法：数据从文件上传至数据库需先将文件读取成可执行插入操作数据，文件所含数据量过大，则读取文件与插入数据均会产生较长的等待时间，因此逐步获取对应的操作进度做出响应（不考虑文件本身上传时间）。
• 实现：根据文件所含数据总量和当前获取数据量计算读取进度，根据已插入数据量和数据总量可计算插入进度，按照读取和插入的效率划分耗时比例求出真实进度。

---

JS代码

// 服务
$interval

// 属性
$scope.uploadProgress = {};
$scope.uploadProgressFlag = false;

// 方法
$scope.upload = function() {
    // 上传实现代码（略）
    ...
    // 验证进度当前状态，此操作可实现主动取消上传
    if(!$scope.uploadProgressFlag){
        // 标记进度开始状态true
        $scope.uploadProgressFlag = true;
        // 初始化进度值
        $scope.uploadProgress.value = 0;
        // 进度开始
        var start = $interval(function(){
            // 首先判断进度是否取消决定是否主动结束
            if(!$scope.uploadProgressFlag){
                $interval.cancel(start);
                // 初始化进度值
                $scope.uploadProgress.value = 0;
                // 终止后台上传方法（略）
                ...
            }else if($scope.uploadProgress.value<1){
                $http.post('./xxxController/getProgress').success(
                    function(data) {
                        // 通过访问后台获取当前上传真实进度
                        $scope.uploadProgress.value = data;
                    }
                );
            }else{
                // 进度自然结束
                $interval.cancel(start);
                $scope.uploadProgressFlag = false;
            }
        }, 500);
    }else{
        // 若为开始状态再次点击则为取消false，此时值的改变可被已经开始的进度获取从而停止进度
        $scope.uploadProgressFlag = false;
    };
};

---

HTML代码

ps：为实现想要的效果（进度填充选择文件的输入框），特请我的伙伴给予的样式调整。

<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()">导入</button>
        <button type="button" class="btn btn-primary" ng-if="uploadProgressFlag"  ng-click="upload()">取消</button>
    </div>
</div>

---

实现效果

ps：进度条左上的状态和右上的百分比均可在每次获取进度的同时进行属性赋值进而实现动态改变的效果。

进度条.png

---

最后

• 大批量数据上传需使用事务管控；
• 导入操作若分多个方法（读、写）则按比重划分每个方法进度比例进而计算出实际进度；
• 终止上传应考虑后台各方法的主动终止情况；