您的位置:首页 > Web前端 > AngularJS

angular 上传文件的插件angular-file-upload

2016-02-23 17:31 585 查看

//html  包裹一层  a 标签  不软效果回事和原声js一样的
<div class="uploading form-group">
<input class="form-control" ng-model="fileItem.name" readonly/>
<a href="javascript:;" class="choose-book">
<input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>
<span>浏览</span>
</a>
</div>
//css
> .uploading {
margin-right: 0px;
> input {
width: 300px;
height: 30px;
line-height: 30px;
float: left;
}
> a {
width: 50px;
text-align: center;
height: 30px;
line-height: 30px;
position: relative;
cursor: default;
overflow: hidden;
display: inline-block;
}
> a input {
position: absolute;
left:0;
top: 0;
opacity: 0;
}
> a span {
display: inline-block;
padding: 0px 5px;
background-color: $light-orange;
color: $gray-light;
}
}

//js代码
var uploader = $scope.uploader = new FileUploader({   //开始要声明一个uploaded对象
url: '/seller/blackMember/upload',
queueLimit: 1,   //文件个数
removeAfterUpload: true,  //上传后删除文件,
formData: [  //http请求传的参数
{type: 0},
{memo: $scope.memo}
]
});
$scope.clearItems = function () {  //重新选择文件时,清空队列,达到覆盖文件的效果
uploader.clearQueue();
}
uploader.onAfterAddingFile = function (fileItem) {
$scope.fileItem = fileItem._file;  //添加文件之后,把文件信息赋给scope
};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
if (response.rescortCode == 0) {
$win.alert("上传成功" + response.resultMessage, $scope);
$('#addBlackMember').modal('hide');
var parentCtrl = $scope.$parent.$parent;
parentCtrl.getResultsPage(1);
} else {
$win.alert(response.resultMessage, $scope);
}
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
$win.alert("error:上传失败", $scope);
};
$scope.UploadFile = uploadFile;
function uploadFile(ele) {
$scope.uploader.type = ele;
uploader.uploadAll();
}

//angular-file-upload.js    文件里的配置项
module.exports = {     //配置项
url: "/",
alias: "file",
headers: {},
queue: [],
progress: 0,
autoUpload: false,
removeAfterUpload: false,
method: "POST",
filters: [],
formData: [],
queueLimit: Number.MAX_VALUE,
withCredentials: false
};

angular-file-upload插件可以到gitHub上进行下载  https://github.com/ZNN-She/angular-file-upload.git


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: