随机文章
热门推荐

AngularJS图片上传功能的实现

发布时间:2017-09-05 10:34:06
AngularJS图片上传功能的实现

<input type="file" file-model="myFile"/>

<div class="col-md-12">

<img ng-src="{{imageSrc}}" style="max-width:300px;max-height:300px;margin:0 auto;display:block;" />

</div>

input文件上传标签,div包裹的img标签为图片预览区域

2、定义directive

angular.module('app') .directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs, ngModel) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function(event){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); }); //附件预览 scope.file = (event.srcElement || event.target).files[0]; scope.getFile(); }); } }; }]);

input标签中的属性file-model即就是Angular中的指令,在上面代码的link方法中,我们为指令file-model所在的元素绑定了change事件,change方法中获取到要上传的文件对象,并调用了controller中的getFile()方法(详见controller)

3、定义控制器UploaderControler

复制代码

angular.module('app')

.controller('UploaderController', function($scope, fileReader){

$scope.getFile = function () {

fileReader.readAsDataUrl($scope.file, $scope)

.then(function(result) {

$scope.imageSrc = result;

});

};

})

复制代码

控制器中定义了一个UploaderController,该控制器在其作用域中定义了getFile()方法,getFile方法中调用了fileReader service中的readAsDataUrl方法,此方法中生成了图片的地址url,并将结果返回getFile中,将返回的url赋值给$scope.imageSrc ,根据Angular双向数据绑定的机制,img元素中ng-src属性值为url,那么就可以在页面上预览图片了。fileReader service是如何定义的呢?

4、定义service fileReader

angular.module('app') .factory('fileReader', ["$q", "$log", function($q, $log){ var onLoad = function(reader, deferred, scope) { return function () { scope.$apply(function () { deferred.resolve(reader.result); }); }; }; var onError = function (reader, deferred, scope) { return function () { scope.$apply(function () { deferred.reject(reader.result); }); }; }; var getReader = function(deferred, scope) { var reader = new FileReader(); reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, scope); return reader; }; var readAsDataURL = function (file, scope) { var deferred = $q.defer(); var reader = getReader(deferred, scope); reader.readAsDataURL(file); return deferred.promise; }; return { readAsDataUrl: readAsDataURL }; }])

fileReader service主要是完成生成获取到的文件的url地址,返回到view进行预览。

5、附件上传的实现

附件上传主要是将页面表单数据通过后台提供的接口写入到数据库中,具体实现在控制器UploaderControler中增加如下代码:

// 组装表单数据 var postData = { vacationType: $scope.leave.type, reason: $scope.leave.reason, familyRelation: +$scope.leave.type == 7 ? $scope.leave.relation : "", startTime: startTime, endTime: endTime, fileName: $scope.imageSrc, workDelivers: workDelivers, ccmailNickNames: sendPersons, realDays: +$scope.leave.type == 8 ? $scope.leave.timeLong : "" }; var promise = postMultipart('/maldives/leave/save', postData); function postMultipart(url, data) { var fd = new FormData(); angular.forEach(data, function(val, key) { fd.append(key, val); }); var args = { method: 'POST', url: url, data: fd, headers: {'Content-Type': undefined}, transformRequest: angular.identity }; return $http(args); }

postData为表单中的数据(包括上传的图片信息),'/maldives/leave/save'表示的是请求后台的数据接口,$http是Angular内置的service,能向后台发送GET或POST请求。

三、对Angular中service、controller、directive的认识和理解

Service就是单例对象在AngluarJS 中的一个别名。这些单例对象会被经常传来传去,保证你每次访问到的都是同一个实例。基于这种思想,单例对象让我们可以实现一些相当酷的功能,它可以让很多controller和directive访问其内部的数值。

controller把service、依赖关系、以及其它对象串联到一起,然后通过scope把它们关联到view上。如果在你的视图里面需要处理复杂的业务逻辑,那么把它们放到controller里面也是一个非常不错的选择。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:鄂州SEO http://ezhou.raoyu.net

本站所有原创信息,未经许可请勿任意转载或复制使用
COPYRIGHT © 2015 古交新闻网 ALL RIGHTS RESERVED.