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

<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 image upload

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

<divclass="button"ngf-selectngf-pattern="'image/*'"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 Singleimage

image-upload.html:<buttonclass="btnbtn-default"ngf-select=""ngf-pattern="'image/*'"ng-model="data.file"
ngf-multiple="false">
选择图片</button>
<span>(支持拖拽单张图片上传)</span>

<divngf-dropngf-pattern="'image/*'"ng-model="data.file"class="cropArea">
<img-cropimage="data.file||data.defaultImage"resule-image="data.file"></img-crop>

<divclass="colcol-sm-4text-left">
<imgngf-src="data.file||data.defaultImage"
style="width:200px;height:200px;max-width:500px;"/>
</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 images upload

image-upload.html:<buttonclass="btnbtn-default"ngf-select="selectImage($files)"ngf-pattern="'image/*'"
ngf-multiple="true">
选择图片</button>
<span>(支持多张图片拖拽上传)</span>
<divclass="rowcropArea"style="padding:015px15px0"ngf-dropngf-pattern="'image/*'"ng-model="files"
ngf-multiple="true">
<img-cropimage="files||data.defaultImage"resule-image="files"></img-crop>
<divngf-no-file-drop>该浏览器不支持拖拽上传。</div>
<divclass="colcol-xs-4text-left"style="margin-top:15px;"ng-repeat="imageinmulImages">
<divng-repeat="oneImageinimage">
<imgngf-src="oneImage||data.defaultImage"class="img-responsive"
style="width:200px;height:200px;max-width:500px;"/>
</div>
</div>
</div>//<img-crop></img-crop>定义了图片可以拖拽的位置//<img/>排列显示上传的多张图片style.css:
.cropArea{
background:#E4E4E4;
min-height:230px;
height:auto;
margin:15px;
margin-right:0;
}

image-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){varimage=[];
image.push(item);
$scope.mulImages.push(image);
})
}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