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

朗明朔 發表於 2019-12-6 17:34:00

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

步骤：
1、
<pre class="hljs dts"><code>var uploader= new FileUploader({
 url:需要上传的地址,
 autoUpload: 是否将文件添加到队列后自动上传（Boolean）,
 headers: 与文件一起发送的头文件,只适合支持html5的浏览器，根据实际情况配置
 });
</code></pre>
<code> </code>
2、
<pre class="hljs php"><code> uploader.filters.push({
 name: 自定义
 fn: function(item) {
 //item就是你上传的文件这里面你就可以写你需要筛选的条件，下面举一个例子，筛选文件的大小
 //$scope.maxSize是我指令传过来的参数
 var fileSizeValid = file.size <= $scope.maxSize; //文件大小限制；
 return fileSizeValid ;
 }
}) 3、调用FileUploader促发的不同函数 </code></pre>
<pre class="hljs actionscript"><code> //添加一个文件失败后触发
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;</code> 实例：</pre>
<pre>/** * 上传功能 */ $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 = ''; }</pre>
<pre class="hljs php"><code> 实例2： </code></pre>
<div class="cnblogs_code">
<pre> 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"multiplefilters="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></pre>
</div>
<pre class="hljs php"><code> </code></pre>
<div class="cnblogs_code">
<pre>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.fileName =fileItem._file.name;*/
 18 var reader = new FileReader();
 19 debugger
 20 /* console.log(fileItem.formData)
 21 reader.readAsArrayBuffer(fileItem.formData);*/
 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 };</pre>
</div>
 
<pre class="hljs php"><code> </code></pre> 
来源：https://www.cnblogs.com/xu-blog/p/11996645.html

頁: [1]

琼殿技术论坛's Archiver

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

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