angular.js的 的上传功能实现---FileUploader
步骤：
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 };
