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