琼殿技术论坛»首页 › 前端开发技术交流 › Angular论坛 › angular.js的 的上传功能实现---FileUploader
返回列表 發新帖
查看: 6|回覆: 0

angular.js的 的上传功能实现---FileUploader

[複製鏈接]
朗明朔

5

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2011-7-5
發表於 2019-12-6 17:34:00 | 顯示全部樓層 |閲讀模式

步骤：

1、

var uploader= new FileUploader({
        url:需要上传的地址,
        autoUpload: 是否将文件添加到队列后自动上传（Boolean）,
        headers: 与文件一起发送的头文件,只适合支持html5的浏览器，根据实际情况配置
      });

 

2、

 uploader.filters.push({
        name: 自定义
        fn: function(item) {
            //item就是你上传的文件这里面你就可以写你需要筛选的条件，下面举一个例子，筛选文件的大小
            //$scope.maxSize是我指令传过来的参数
            var fileSizeValid = file.size <= $scope.maxSize; //文件大小限制；
            return fileSizeValid ;
        }
    })
3、调用FileUploader促发的不同函数
 //添加一个文件失败后触发
     uploader.onWhenAddingFileFailed = function(item , filter, options) {};
     
     //    向队列中添加一个单独的文件后触发
    uploader.onAfterAddingFile = function(fileItem) {};
    
    //在所有被拖拽或被选中的文件添加到队列后触发。
    uploader.onAfterAddingAll = function(addedFileItems) {};
    
    //在上传一个文件对象之前触发
    uploader.onBeforeUploadItem = function(item) {};
    
    //文件正在上传中触发
    uploader.onProgressItem = function(fileItem, progress) {};
    
    //文件上传进度
    uploader.onProgressAll = function(progress) {};
    
    //关于上传队列的进展
    uploader.onSuccessItem = function(fileItem, response, status, headers) {};
    
    //上传出错时触发
    uploader.onErrorItem = function(fileItem, response, status, headers) {};
    
    //取消上传时触发
    uploader.onCancelItem = function(fileItem, response, status, headers) {};
    
    //在文件上传完成时触发（独立操作成功）
    uploader.onCompleteItem = function(fileItem, response, status, headers) {};
    
    //上传一个完整的队列时加载所有的文件，或上传一个单独的文件时加载该文件时触发
    uploader.onCompleteAll = function() {};
    
    return uploader;
实例：
/**
 * 上传功能
 */
$scope.uploadStatus = false; //定义两个上传后返回的状态，成功获失败
var uploader = $scope.uploader = new FileUploader({
    url: '/comm-fileserver/uploadFile',
    formData:[{userCode:$scope.usercode,systemId:'gscore-pa-web',bussType:'payment'}],
    queueLimit: 1, //文件个数
    removeAfterUpload: true //上传后删除文件
});
$scope.clearCarItems = function(){ //重新选择文件时，清空队列，达到覆盖文件的效果
    uploader.clearQueue();
    $scope.fileItem = '';
}
uploader.onAfterAddingFile = function(fileItem) {
    if($scope.iEVersion==8){
        $scope.fileItem = fileItem.file; //添加文件之后，把文件信息赋给scope
        if($scope.fileItem.type !== 'like/xls'){
            layer.msg('上传文件必须为.xls类型文件！！')
            $scope.importCondition = {};
            $scope.fileItem = '';
            return false;
        }
    }else {
        $scope.fileItem = fileItem._file; //添加文件之后，把文件信息赋给scope
        if($scope.fileItem.type !== 'application/vnd.ms-excel'){
            layer.msg('上传文件必须为.xls类型文件！！')
            $scope.importCondition = {};
            $scope.fileItem = '';
            return false;
        }
    }
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    $scope.uploadStatus = true; //上传成功则把状态改为true
    $scope.importCondition.impFileNum = response.resultObj.fileId;
    $scope.importCondition.webUserCode =$scope.usercode;
    //$scope.importCondition.webComCode=$scope.centerCode;
    $scope.importCondition.webComCode=$scope.comCode;
    $scope.importCondition.webTaskCode=$scope.getMenuData(location.hash.substring(2,location.hash.length)).taskCode
    $scope.importCondition.processStatus=$scope.colRegCondition.processStatus;
    goImport($scope.importCondition);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
    $scope.uploadStatus = false;//上传失败则把状态改为false
    layerMsg('上传失败')
    //alert('上传失败！');
    //暂时功能
    //$scope.importCondition.impFileNum = '123456789';
};
var goImport=function(obj){
    $$accountManagement.importFile(obj,{
        success: function (data) {
            if(data.resultCode == '0000'){
                $scope.showMsgList.push(angular.copy(data.content));
                $scope.fileData={
                    "fileName":data.fileName,
                    "impFileNum":data.impFileNum,
                    "impNum":data.impNum,
                    "impAmount":data.impAmount,
                    "currenCY":data.currenCY,
                }
                $scope.importCondition = {};
                $scope.showSubmitBtn=true;
            }else{
                $scope.uploadStatus=false;
                $scope.showMsgList.push(angular.copy(data.content));
                $scope.resetUploadFile();
            }
        },
        error: function (e) {
        }
    })

};
$scope.resetUploadFile=function () {
    $scope.importCondition = {};
    $scope.showSubmitBtn=false;
    $scope.fileItem = '';
}
 实例2：
 1      <form class="form-horizontal" enctype="multipart/form-data">
 2             <div class="form-group col-xs-12 col-sm-12 col-md-6">
 3                 <label class="col-xs-4">选择待导入文件上传：</label>
 4                 <div class="col-xs-7">
 5                     <div class="col-xs-12 input-group" style="margin-top: 0">
 6                         <input placeholder="请选择要上传的文件" disabled type="text" class="form-control" ng-model="fileItem.name">
 7                         <a href="javascript:;" class="input-group-addon cursor_pointer">
 8                             <div class="glyphicon">浏览</div>
 9                             <input name="certificate" nv-file-select uploader="uploader"  id="fielinput" ng-click="clearItems()" type="file" class="collectscene_file_item"  multiple  filters="queueLimit,customFilter"/>
10                         </a>
11                     </div>
12                 </div>
13             </div>
14             <div class="form-group"></div>
15             <div class="row list_queryForm_btn">
16                 <button class="btn btn-success btn-width" ng-click="submitImport()">提交</button>
17                 <button class="btn btn-primary" ng-click="downLoadTem()">模板下载</button>
18             </div>
19         </form>
 
  1    //上传
  2         $scope.uploadStatus = false; //定义两个上传后返回的状态，成功获失败
  3         $scope.UpLoadReqDto={};
  4         var uploader = $scope.uploader = new FileUploader({
  5             /*   url: '/file/uploadFile?userCode=200000477&systemId=crp&bussType=dpProposal',*/
  6             url: '/file/uploadFile?userCode='+$rootScope.user.userCode+'&systemId=crp&bussType=dpProposal',
  7             queueLimit: 1, //文件个数
  8             removeAfterUpload: false, //上传后删除文件
  9 
 10         });
 11         $scope.clearItems = function(){ //重新选择文件时，清空队列，达到覆盖文件的效果
 12             uploader.clearQueue();
 13         };
 14         uploader.onAfterAddingFile = function(fileItem) {
 15             console.log(fileItem);
 16 
 17             /*  fileItem.formData[0].fileName =  fileItem._file.name;*/
 18             var reader = new FileReader();
 19             debugger
 20             /*     console.log(fileItem.formData[0])
 21              reader.readAsArrayBuffer(fileItem.formData[0]);*/
 22             if($scope.iEVersion==8){
 23                 $scope.fileItem = fileItem.file; //添加文件之后，把文件信息赋给scope
 24                 if($scope.fileItem.type !== 'like/xls'){
 25                     layer.msg('上传文件必须为.xls类型文件！！')
 26                     $scope.importCondition = {};
 27                     $scope.fileItem = '';
 28                     return false;
 29                 }
 30             }else {
 31 
 32                 $scope.fileItem = fileItem._file; //添加文件之后，把文件信息赋给scope
 33                 if($scope.fileItem.type !== 'text/plain'
 34                     && $scope.fileItem.type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
 35                     && $scope.fileItem.type != 'application/vnd.ms-excel'){
 36                     layer.msg('上传文件必须为.xls,xlsx, csv类型文件！！')
 37                     $scope.importCondition = {};
 38                     $scope.fileItem = '';
 39                     return false;
 40                 }
 41             }
 42         };
 43         uploader.onSuccessItem = function(fileItem, response, status, headers) {
 44             $scope.uploadStatus = true;
 45             $scope.fileItem = '';
 46             $scope.UpLoadReqDto={};
 47             $scope.UpLoadReqDto.fileName =fileItem._file.name;
 48             $scope.UpLoadReqDto.fileId=response.fileId;
 49             $scope.UpLoadReqDto.channelCode =$scope.newColRegCondition.channelCode ;
 50             $scope.UpLoadReqDto.operatorCode =$rootScope.user.userCode;
 51             $scope.UpLoadReqDto.comCode=$scope.comCode;
 52             $scope.importCond = function(){
 53                 $$statementImport.submitImportDataAdd($scope.UpLoadReqDto,{
 54                     success: function (data) {
 55                         if(data.content.resultCode == 1){
 56                             layer.confirm('数据已存在，是否重复导入！',{btn: ['确定','取消'],icon: '3'},function(index){
 57                                 //点确定回调方法
 58                                 $scope.importCondition.signRequest = '1';
 59                                 $$statementImport.submitImportDataAdd($scope.importCondition,{
 60                                     success:function (data) {
 61                                         if(data.content.resultCode == '0000'){
 62                                             layer.msg(data.content.resultMsg,{icon:1});
 63                                             $scope.importCondition = {};
 64                                             return false;
 65                                         }else{
 66                                             layer.alert(data.content.resultMsg,{icon:2})
 67                                             return false;
 68                                         }
 69                                     },error: function (e) {
 70                                         layer.alert(data.content.resultMsg,{icon:2})
 71                                         return false;
 72                                     }
 73                                 })
 74                             })
 75                         }else if(data.content.resultCode == '0000'){
 76                             layer.msg(data.content.resultMsg,{icon: 1})
 77                             $scope.importCondition = {};
 78                             return false;
 79                         }else{
 80                             layer.alert(data.content.resultMsg,{icon:2})
 81                             return false;
 82                         }
 83                         angular.forEach($scope.confirmList,function(data){
 84                             $scope.queryNum++;
 85                             data.checked=false;
 86                             data.selectedClass=''
 87                         })
 88                     },
 89                     error: function (e) {
 90                         layer.alert(data.content.resultMsg,{icon:2})
 91                         return false;
 92                     }
 93                 });
 94             }
 95             $scope.importCond();
 96 
 97 
 98         };
 99         uploader.onErrorItem = function (fileItem, response, status, headers) {
100             $scope.uploadStatus = false;//上传失败则把状态改为false
101             $scope.fileItem = '';
102             layer.alert('上传失败！');
103         };
104         /**
105          *提交
106          */
107         $scope.submitImport = function(target){
108             //先验证焦点定位
109             $scope.uploadStatus = false;
110             $$venus.Focus(
111                 "premiumForm"
112             ).then(
113                 function (Ele) {
114                     if (angular.isDefined(Ele)) {
115                         $timeout(function () {
116                             Ele.focus();
117                         },1000)
118                     } else {
119                         debugger
120                         uploader.uploadAll();
121                         if($scope.fileItem== undefined||$scope.fileItem== ''){
122                             layerMsg('请选择上传文件')
123                         }
124 
125 
126                     }
127                 }
128             )
129 
130         };

 

 


来源：https://www.cnblogs.com/xu-blog/p/11996645.html
回覆

使用道具 舉報

返回列表 發新帖
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

Archiver|手机版|小黑屋|琼殿技术论坛 |nimba_sitemap:appname

相关侵权、举报、投诉及建议等，请发 E-mail：qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部