图片上传 痛定思痛。 2022-06-05 00:48 237阅读 0赞 [AngularJS图片上传功能的实现][AngularJS] 一、前言 前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是英文文档)折腾了很久才弄出来,现将整个流程整理出来,有需要的朋友可以参考一下,如果您有更好的方法,欢迎留言交流~~话不多说直接看实现。 二、具体实现 1、html标签结构 <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 ![复制代码][copycode.gif] ![复制代码][copycode.gif 1] 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(); }); } }; }]); ![复制代码][copycode.gif 1] ![复制代码][copycode.gif] input标签中的属性file-model即就是Angular中的指令,在上面代码的link方法中,我们为指令file-model所在的元素绑定了change事件,change方法中获取到要上传的文件对象,并调用了controller中的getFile()方法(详见controller) 3、定义控制器UploaderControler ![复制代码][copycode.gif] ![复制代码][copycode.gif 1] angular.module('app') .controller('UploaderController', function($scope, fileReader){ $scope.getFile = function () { fileReader.readAsDataUrl($scope.file, $scope) .then(function(result) { $scope.imageSrc = result; }); }; }) ![复制代码][copycode.gif 1] ![复制代码][copycode.gif] 控制器中定义了一个UploaderController,该控制器在其作用域中定义了getFile()方法,getFile方法中调用了fileReader service中的readAsDataUrl方法,此方法中生成了图片的地址url,并将结果返回getFile中,将返回的url赋值给$scope.imageSrc ,根据Angular双向数据绑定的机制,img元素中ng-src属性值为url,那么就可以在页面上预览图片了。fileReader service是如何定义的呢? 4、定义service fileReader ![复制代码][copycode.gif] ![复制代码][copycode.gif 1] 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 }; }]) ![复制代码][copycode.gif 1] ![复制代码][copycode.gif] fileReader service主要是完成生成获取到的文件的url地址,返回到view进行预览。 5、附件上传的实现 附件上传主要是将页面表单数据通过后台提供的接口写入到数据库中,具体实现在控制器UploaderControler中增加如下代码: ![复制代码][copycode.gif] ![复制代码][copycode.gif 1] // 组装表单数据 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); } ![复制代码][copycode.gif 1] ![复制代码][copycode.gif] postData为表单中的数据(包括上传的图片信息),'/maldives/leave/save'表示的是请求后台的数据接口,$http是Angular内置的service,能向后台发送GET或POST请求。 三、对Angular中service、controller、directive的认识和理解 Service就是单例对象在AngluarJS 中的一个别名。这些单例对象会被经常传来传去,保证你每次访问到的都是同一个实例。基于这种思想,单例对象让我们可以实现一些相当酷的功能,它可以让很多controller和directive访问其内部的数值。 controller把service、依赖关系、以及其它对象串联到一起,然后通过scope把它们关联到view上。如果在你的视图里面需要处理复杂的业务逻辑,那么把它们放到controller里面也是一个非常不错的选择。 Angular对directive的定义是一段代码片段,你可以用它来操作DOM,也可以使用它来进行用户交互。 如需转载本文,请注明来源: [http://www.cnblogs.com/changjianqiu/][http_www.cnblogs.com_changjianqiu] [AngularJS]: http://www.cnblogs.com/tuzhi/articles/4679178.html [copycode.gif]: /images/20220605/25a9609002fc42eca61362381691e6f7.png [copycode.gif 1]: /images/20220605/4f5b5a4c46304685b64c53f768a1a06a.png [http_www.cnblogs.com_changjianqiu]: http://www.cnblogs.com/changjianqiu/
相关 apiclod 上传图片_apiCloud上传图片 Hello APP height:100%; \} \wrap\{ height:100%; display:-webkit-box; display:-webki 野性酷女/ 2022年10月31日 00:57/ 0 赞/ 255 阅读
相关 图片上传 [AngularJS图片上传功能的实现][AngularJS] 一、前言 前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是 痛定思痛。/ 2022年06月05日 00:48/ 0 赞/ 238 阅读
相关 图片上传 上篇博客已经介绍了文件的上传,这次就简单总结一下图片的上传,以及上传图片的显示。 利用三个控件:Input(File)、Button控件、Image控件,页面简单设计如下图: 川长思鸟来/ 2022年06月03日 08:26/ 0 赞/ 232 阅读
相关 图片上传 1, 定义模型 class UserLearn(models.Model): u_name = models.CharField(max_length=16) u_i 缺乏、安全感/ 2022年06月03日 02:27/ 0 赞/ 251 阅读
相关 图片上传 html <button type="button" class="btn btn-primary" οnclick="F\_Open\_dialog2()">Impor 小咪咪/ 2022年06月01日 14:24/ 0 赞/ 270 阅读
相关 图片上传 文件上传流程: 1、定义 <input type="file" name="file" accept="image/\" onchange="uploadimage(th ゝ一世哀愁。/ 2022年04月02日 11:46/ 0 赞/ 331 阅读
相关 上传图片 开发工具与关键技术:Visual Studio 作者:肖广斌 撰写时间:2019年5月12日 在做项目时,我们在完善一些个人信息、或者一些页面时,我们需要用到图片, 本是古典 何须时尚/ 2022年01月31日 12:45/ 0 赞/ 302 阅读
相关 上传图片 @Service public class FileServiceImpl implements FileService { privat 柔情只为你懂/ 2021年12月23日 13:47/ 0 赞/ 392 阅读
相关 上传图片 <img src="~/Content/img/btn\_1.png" class="img-responsive" id="a\_pic"> <input class=" £神魔★判官ぃ/ 2021年09月30日 09:54/ 0 赞/ 582 阅读
相关 上传图片 // 允许上传的图片后缀 $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = expl 蔚落/ 2021年09月18日 22:22/ 0 赞/ 518 阅读
还没有评论,来说两句吧...