angularJs中上傳圖片/文件功能：ng-file-upload

原文技術交流：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/

在做網站的過程中難免會遇到上傳圖片或者上傳文件的功能，使用AngularJ實現的話可以用angularJs的ng-file-upload這個庫。

• 支持上傳文件(目前為止我用過的是Excel上傳，與上傳圖片的方法一樣)

• 支持單張圖片上傳

• 支持多張圖片上傳

• 支持拖拽圖片上傳

1.Install安裝引用

• 手冊：可以從這里下載最新的js庫

• Bower安裝：
  bower install ng-file-upload-shim --save(for non html5 suppport)
  bower install ng-file-upload --save

• NuGet：PM> Install-Package angular-file-upload

• NPM：npm install ng-file-upload

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

2.Usage用法

(1)Single p_w_picpath upload

p_w_picpath-upload.html://顯示選擇的圖片<img ngf-src="data.file || data.defaultImage" class="img-responsive" />
<div class="button" ngf-select="" ngf-pattern="'p_w_picpath/*'" ngf-multiple="false" ng-model="data.file">選擇文件</div>
<button ng-click="upload()">upload</button>
 p_w_picpath-upload-ctrl.js:
 $scope.data = {
    file: null};
$scope.upload = function () {    if (!$scope.data.file) {        return;
    }    var url = $scope.params.url;  //params是model傳的參數，圖片上傳接口的url
    var data = angular.copy($scope.params.data || {}); // 接口需要的額外參數，比如指定所上傳的圖片屬于哪個用戶: { UserId: 78 }
    data.file = $scope.data.file;

    Upload.upload({
        url: url,
        data: data
    }).success(function (data) {
        $scope.hide(data);
    }).error(function () {
        logger.log('error');
    });
};

(2)Multiple p_w_picpaths upload 

<div class="button" ngf-select ngf-pattern="'p_w_picpath/*'" ng-model="files" ngf-multiple="true">選擇多張圖片</div> 
//ngf-multiple控制是否可以上傳多張圖片 
    // for multiple files:
    $scope.upload = function (files) {      if (files && files.length) {        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }        // or send them all together for HTML5 browsers:        Upload.upload({..., data: {file: files}, ...})...;
      }
    }

(3)Drop Single  p_w_picpath 

p_w_picpath-upload.html:<button class="btn btn-default" ngf-select="" ngf-pattern="'p_w_picpath/*'" ng-model="data.file"
        ngf-multiple="false">
    選擇圖片</button>
<span>(支持拖拽單張圖片上傳)</span>
 
<div ngf-drop ngf-pattern="'p_w_picpath/*'" ng-model="data.file" class="cropArea">
    <img-crop p_w_picpath="data.file|| data.defaultImage" resule-p_w_picpath="data.file"></img-crop>

    <div class="col col-sm-4 text-left">
        <img ngf-src="data.file|| data.defaultImage"
             />
    </div>
</div>
 
<button class="btn btn-primary" ng-click="upload()">開始上傳</button>
 style.css:
.cropArea {
    background: #E4E4E4;
    min-height: 230px;
    height: auto;
    margin: 15px;
    margin-right: 0;
}

(4)Drop and Select  Multiple p_w_picpaths upload 

p_w_picpath-upload.html:<button class="btn btn-default" ngf-select="selectImage($files)" ngf-pattern="'p_w_picpath/*'"
        ngf-multiple="true">
    選擇圖片</button>
<span>(支持多張圖片拖拽上傳)</span>
<div class="row cropArea"  ngf-drop ngf-pattern="'p_w_picpath/*'" ng-model="files"
     ngf-multiple="true">
    <img-crop p_w_picpath="files || data.defaultImage" resule-p_w_picpath="files"></img-crop>
    <div ngf-no-file-drop>該瀏覽器不支持拖拽上傳。</div>
    <div class="col col-xs-4 text-left"  ng-repeat="p_w_picpath in mulImages">
        <div ng-repeat="oneImage in p_w_picpath">
            <img ngf-src="oneImage || data.defaultImage" class="img-responsive" 
                 />
        </div>
    </div>
</div>//<img-crop></img-crop>定義了圖片可以拖拽的位置//<img/>排列顯示上傳的多張圖片 style.css:
.cropArea {
    background: #E4E4E4;
    min-height: 230px;
    height: auto;
    margin: 15px;
    margin-right: 0;
}

p_w_picpath-upload-ctrl.js:
$scope.data = {
    file: null,
    defaultImage: commonSvc.defaultImage
};

$scope.mulImages = [];

$scope.$watch('files', function () {
    $scope.selectImage($scope.files);
});//根據選擇的圖片來判斷 是否為一下子選擇了多張//一下子選擇多張的數據格式為一個數組中有多個對象，而一次只選擇一張的數據格式為一個數組中有一個對象$scope.selectImage = function (files) {    if (!files || !files.length) {        return;
    }    if (files.length > 1) {
        angular.forEach(files, function (item) {            var p_w_picpath = [];
            p_w_picpath.push(item);
            $scope.mulImages.push(p_w_picpath);
        })
    } else {
        $scope.mulImages.push(files);
    }
};

$scope.upload = function () {    if (!$scope.mulImages.length) {        return;
    }    var url = $scope.params.url;    var data = angular.copy($scope.params.data || {});
    data.file = $scope.mulImages;

    Upload.upload({
        url: url,
        data: data
    }).success(function (data) {
        $scope.hide(data);
        $rootScope.alert('success');
    }).error(function () {
        $rootScope.alert(‘error’);
    });

};

 以上內容是我做項目中需要的一些功能，也許不是該庫全面的功能，若有其他需求可以查看GitHub官方文檔：https://github.com/danialfarid/ng-file-upload