原文技术交流：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上传，与上传图片的方法一样)

支持单张图片上传

支持多张图片上传

支持拖拽图片上传

手册：可以从这里下载最新的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

<scriptsrc="angular(.min).js"></script><scriptsrc="ng-file-upload-shim(.min).js"></script><!--fornohtml5browserssupport--><scriptsrc="ng-file-upload(.min).js"></script>2.Usage用法

(1)Single p_w_picpath upload

p_w_picpath-upload.html://显示选择的图片<imgngf-src="data.file||data.defaultImage"class="img-responsive"/><divclass="button"ngf-select=""ngf-pattern="'p_w_picpath/*'"ngf-multiple="false"ng-model="data.file">选择文件</div><buttonng-click="upload()">upload</button>p_w_picpath-upload-ctrl.js:$scope.data={file:null};$scope.upload=function(){if(!$scope.data.file){return;}varurl=$scope.params.url;//params是model传的参数，图片上传接口的urlvardata=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

<divclass="button"ngf-selectngf-pattern="'p_w_picpath/*'"ng-model="files"ngf-multiple="true">选择多张图片</div>//ngf-multiple控制是否可以上传多张图片//formultiplefiles:$scope.upload=function(files){if(files&&files.length){for(vari=0;i<files.length;i++){Upload.upload({...,data:{file:files[i]},...})...;}//orsendthemalltogetherforHTML5browsers:Upload.upload({...,data:{file:files},...})...;}}

(3)Drop Singlep_w_picpath

p_w_picpath-upload.html:<buttonclass="btnbtn-default"ngf-select=""ngf-pattern="'p_w_picpath/*'"ng-model="data.file"ngf-multiple="false">选择图片</button><span>(支持拖拽单张图片上传)</span><divngf-dropngf-pattern="'p_w_picpath/*'"ng-model="data.file"class="cropArea"><img-cropp_w_picpath="data.file||data.defaultImage"resule-p_w_picpath="data.file"></img-crop><divclass="colcol-sm-4text-left"><imgngf-src="data.file||data.defaultImage"/></div></div><buttonclass="btnbtn-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:<buttonclass="btnbtn-default"ngf-select="selectImage($files)"ngf-pattern="'p_w_picpath/*'"ngf-multiple="true">选择图片</button><span>(支持多张图片拖拽上传)</span><divclass="rowcropArea"ngf-dropngf-pattern="'p_w_picpath/*'"ng-model="files"ngf-multiple="true"><img-cropp_w_picpath="files||data.defaultImage"resule-p_w_picpath="files"></img-crop><divngf-no-file-drop>该浏览器不支持拖拽上传。</div><divclass="colcol-xs-4text-left"ng-repeat="p_w_picpathinmulImages"><divng-repeat="oneImageinp_w_picpath"><imgngf-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){varp_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;}varurl=$scope.params.url;vardata=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