原文技术交流:http://www./%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 image upload
image-upload.html:
//显示选择的图片
<img ngf-src="data.file || data.defaultImage" class="img-responsive" style="width:200px; height: 200px; max-width:500px;"/>
<div class="button" ngf-select="" ngf-pattern="'image/*'" ngf-multiple="false" ng-model="data.file">
选择文件
</div>
<button ng-click="upload()">upload</button>
image-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 images upload
<div class="button" ngf-select ngf-pattern="'image/*'" 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 image
image-upload.html:
<button class="btn btn-default" ngf-select="" ngf-pattern="'image/*'" ng-model="data.file"
ngf-multiple="false">
选择图片
</button>
<span>(支持拖拽单张图片上传)</span>
<div ngf-drop ngf-pattern="'image/*'" ng-model="data.file" class="cropArea">
<img-crop image="data.file|| data.defaultImage" resule-image="data.file"></img-crop>
<div class="col col-sm-4 text-left">
<img ngf-src="data.file|| data.defaultImage"
style="width:200px; height: 200px; max-width:500px;"/>
</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 images upload
image-upload.html:
<button class="btn btn-default" ngf-select="selectImage($files)" ngf-pattern="'image/*'"
ngf-multiple="true">
选择图片
</button>
<span>(支持多张图片拖拽上传)</span>
<div class="row cropArea" style="padding: 0 15px 15px 0" ngf-drop ngf-pattern="'image/*'" ng-model="files"
ngf-multiple="true">
<img-crop image="files || data.defaultImage" resule-image="files"></img-crop>
<div ngf-no-file-drop>该浏览器不支持拖拽上传。</div>
<div class="col col-xs-4 text-left" style="margin-top: 15px;" ng-repeat="image in mulImages">
<div ng-repeat="oneImage in image">
<img ngf-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) {
var image = [];
image.push(item);
$scope.mulImages.push(image);
})
} 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
|