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 = '';
}