码迷,mamicode.com
首页 > Web开发 > 详细

angular在1.5.5以上文件上传进度监控

时间:2019-04-11 19:46:43      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:orm   失败   button   span   else   OLE   show   load   结合   

angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法。

发送请求:

$http({
method:"POST",
url:basePath+"/roadShow/saveOrUpdate",
eventHandlers: {
progress: function(c) {
console.log(‘Progress -> ‘ + c);
console.log(c);
}
},
uploadEventHandlers: {
progress: function(e) {
console.log(‘UploadProgress -> ‘ + e);
console.log(e.loaded/e.total*100);
}
},
data:form,
headers:{"Content-Type":undefined},
transformRequest: angular.identity
})

 

$scope.uploadSample = function(sampleFile){
        var fd = new FormData();
        fd.append(‘file‘,sampleFile);
        $http({
            method:‘post‘,
            uploadEventHandlers: {
                progress: function(e) {
                   $scope.sampleFile.progress = parseInt(e.loaded/e.total*100);
                }
            },
            url:$scope.baseUrl + ‘sampleCenter/administration‘,
            data:fd
        }).then(function(response){
            if(response.data.error){
                ngTip.tip(response.data.error, ‘error‘);
            }else{
                ngTip.tip(response.data.success, ‘success‘);
            }
        },function(){
            ngTip.tip(‘上传失败请与管理员联系‘, ‘error‘);
        })
    }
<div class="login_wrapper">
    <form name="fileForm">
        <fieldset>
            <legend>文件上传</legend>
            <div class="form-group">
                <input type="file" ngf-select ng-model="sampleFile" name="filename" accept=".xlsx" required ngf-model-invalid="errorFile">
                  <i ng-show="fileForm.file.$error.required">*请选择文件</i>
            </div>
            <div class="form-group">
                <button ng-click="sampleFile = null" ng-show="sampleFile" class="btn btn-danger btn-sm">移除</button>
                <button ng-disabled="!fileForm.$valid" ng-click="uploadSample(sampleFile)" class="btn btn-primary btn-sm">上传</button>
            </div>
            <div class="form-group">
                <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:{{sampleFile.progress}}%" ng-bind="sampleFile.progress + ‘%‘"></div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

 

 


其中,可以用e.loaded/e.total*100来计算进度:

 

实际应用时,可结合Math.floor()。

angular在1.5.5以上文件上传进度监控

标签:orm   失败   button   span   else   OLE   show   load   结合   

原文地址:https://www.cnblogs.com/yiyangl/p/10691643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!