AngularJS学习之 angular-file-upload控件使用方法

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');
    };