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