AngularJS学习之 angular-file-upload控件使用方法
2017-05-10 19:30
549 查看
1.官方链接 https://github.com/nervgh/angular-file-upload
2.安装到项目中
bower install angular-file-upload(安装完成后,记得html中添加js文件引用)
3.html部分
4.Controller
2.安装到项目中
bower install angular-file-upload(安装完成后,记得html中添加js文件引用)
3.html部分
<div class="form-group"> <input type="file" file-model="myFile" nv-file-select uploader="uploader">/*这一句必须有*/ <img alt="配图预览" ng-src="{{imageSrc}}"class="img-responsive"> <div class="table-responsive col-md-8 padding-0"> <table class="table" > <thead> <tr><th>图片名</th> <th>文件大小</th> <th>进度</th> <th>操作</th> <th>操作</th> </tr></thead> <tbody> [b] <tr ng-repeat="item in uploader.queue">/*这一句是关键*/[/b] <td >{{uploadImages.imageName}}</td> <td >{{uploadImages.imageSize}}</td> <td></td> <td nowrap> <button type="button" class="btn btn-success btn-xs"[b] ng-click="item.upload()"[/b][b] /*这个必须有*/[/b]ng-disabled="item.isReady || item.isUploading || item.isSuccess"> <span class="glyphicon glyphicon-upload"></span> Upload </button> <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> Cancel </button> <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> </td> </tr> </tbody> </table> </div> </div>
4.Controller
[b] var uploader=$scope.uploader=new[/b][b] FileUploader();/*实例化一个FileUploader对象*/ uploader.url[/b]='/carrots-admin-ajax/a/u/img/task';/*以下是设置了两个必须的属性*/ uploader.queue=[]; /*以下是上传过程中以及结束后所做的处理动作,可以只拿自己需要的部分,最好将这些都放到一个service中*/ uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) { console.info('onWhenAddingFileFailed', item, filter, options); }; uploader.onAfterAddingFile = function(fileItem) { console.info('onAfterAddingFile', fileItem); }; uploader.onAfterAddingAll = function(addedFileItems) { console.info('onAfterAddingAll', addedFileItems); }; uploader.onBeforeUploadItem = function(item) { console.info('onBeforeUploadItem', item); }; uploader.onProgressItem = function(fileItem, progress) { console.info('onProgressItem', fileItem, progress); }; uploader.onProgressAll = function(progress) { console.info('onProgressAll', progress); }; uploader.onSuccessItem = function(fileItem, response, status, headers) { // alert(response) console.info('onSuccessItem', response.data.url); }; uploader.onErrorItem = function(fileItem, response, status, headers) { console.info('onErrorItem', fileItem, response, status, headers); }; uploader.onCancelItem = function(fileItem, response, status, headers) { console.info('onCancelItem', fileItem, response, status, headers); }; uploader.onCompleteItem = function(fileItem, response, status, headers) { console.info('onCompleteItem', fileItem, response, status, headers); }; uploader.onCompleteAll = function() { console.info('onCompleteAll'); };
相关文章推荐
- 基于AngularJs的上传控件-angular-file-upload
- 基于AngularJs的上传控件-angular-file-upload
- Uploadfile 文件上传控件使用方法
- 用.NET的File控件上传文件的解决方案(被动解决方案)(本文章来自于互联网,感谢原作者的辛勤劳动,摘抄在此仅作为学习使用!)
- richfaces fileupload组件的使用方法
- IOS学习之UISwitch控件两种使用方法和监听
- .NET的file文件上传控件使用方法 修改web.config文件上传大文件
- c# FileSystemWatcher控件的使用方法
- windowform下 richTextBox+openFileDialog+saveFileDialog的使用方法 + 控件不获取焦点时自动关闭
- IE下使用js清空file控件值的几种方法
- IOS学习之UISwitch控件两种使用方法和监听
- IOS 学习笔记(5) 控件 文本视图(UITextView)的使用方法
- Commons FileUpload组件使用方法详解(包含源代码) --(转)
- Commons FileUpload组件使用方法详解(包含源代码)
- iOS学习之UISwitch控件两种使用方法和监听
- 使用WebClient.UpLoadFile方法在C/S程序中上传文件
- Commons FileUpload组件使用方法
- updatePanel下使用uploadFile控件
- [故障排除记录]虚拟目录程序中UploadFile控件失效问题的解决方法
- IOS学习笔记(七)之UISegmentedControl分段控件的基本概念和使用方法