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
相关文章推荐
- Angular 使用个人总结
- Angularjs自定义指令之三级联动---地理位置的选择
- 深入理解Angular作用域
- angularJs 中controller与sever
- angularJS $watch $timeout 使用心得
- angularJS directive详解
- [转]通过AngularJS directive对bootstrap日期控件的的简单包装
- angularJs学习笔记-入门
- Ionic+angularjs 系列文章学习记录
- AngularJS 表达式 与 JavaScript 表达式
- gulp 在 angular 项目中的使用
- Angular源码理解–启动过程
- AngularJS表达式中的HTML内容
- angularjs中判断ng-repeat是否迭代完
- 【20】AngularJS 参考手册
- 【19】AngularJS 应用
- 【18】AngularJS 包含
- angular2 中文学习资料整理
- 【17】AngularJS Bootstrap
- 【16】AngularJS API