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>
<tr ng-repeat="item in uploader.queue">/*这一句是关键*/
<td >{{uploadImages.imageName}}</td>
<td >{{uploadImages.imageSize}}</td>
<td></td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" /*这个必须有*/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
var uploader=$scope.uploader=new FileUploader();/*实例化一个FileUploader对象*/
uploader.url='/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');
};