angular.js的 的上傳功能實現---FileUploader

步驟：

一、

var uploader= new FileUploader({
 url:須要上傳的地址,  autoUpload: 是否將文件添加到隊列後自動上傳（Boolean）,  headers: 與文件一塊兒發送的頭文件,只適合支持html5的瀏覽器，根據實際狀況配置 }); 

 

二、

uploader.filters.push({
        name: 自定義
        fn: function(item) { //item就是你上傳的文件這裏面你就能夠寫你須要篩選的條件，下面舉一個例子，篩選文件的大小 //$scope.maxSize是我指令傳過來的參數 var fileSizeValid = file.size <= $scope.maxSize; //文件大小限制； return fileSizeValid ; } })
三、調用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 = '';}