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