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

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部分

<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');
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: