angularjs实现多张图片上传并预览功能


Posted in Javascript onFebruary 24, 2017

本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下

directive.js

/* 
 * 多图片上传及预览指令(需指定图片类名) 
 * 
 */ 
 
angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) { 
 return { 
 restrict:'A', 
  link:function(scope, element, attrs, ngModel) { 
  var model = $parse(attrs.fileModel); 
  var modelSetter = model.assign; 
  var imgviewID = attrs["imgViewId"]; 
  var imgView = angular.element(document.querySelector("."+imgviewID)); 
  element.bind('change', function(event) { 
  scope.$apply(function() { 
   modelSetter(scope, element[0].files[0]); 
  }); 
  //附件预览 
  scope.file = (event.srcElement || event.target).files[0]; 
  fileReader.readAsDataUrl(scope.file, scope).then(function(result) { 
   imgView.attr("src",result); 
  }); 
  }); 
 } 
 } 
}]); 
 
angular.module('routerModule').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 
 }; 
 } 
]);

html关键代码

<section class="infogroup"> 
 <h4>法人证件</h4> 
 <div class="row relatedCard"> 
 <div class="col-md-4 txtcenter"> 
  <p>身份证正面</p> 
  <div><img ng-src="showImg/{{dealer.idCardFace}}" class="idCardFace" enlarge-pic/></div> 
  <span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑 
   <input type="file" file-model="idCardFace" img-view-id="idCardFace" /> 
  </span> 
 </div> 
 <div class="col-md-4 txtcenter"> 
  <p>身份证反面</p> 
  <div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div> 
  <span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑 
   <input type="file" file-model="idCardBack" img-view-id="idCardBack" /> 
  </span> 
 </div>     
 </div> 
</section>

controller.js中发送到后台的数据

$scope.postData = { 
 dealerId: $scope.dealer.dealerId, 
 companyName: $scope.dealer.companyName, 
 companySize: $scope.dealer.companySize, 
 idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src, 
 idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src 
}; 
$http.post('updateDealerCertificate',$scope.postData).success(function(data){ 
<!-- 成功执行代码 --> 
});

预览如下:

angularjs实现多张图片上传并预览功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE的fireEvent方法概述及应用
Feb 22 Javascript
jquery实现动态画圆
Dec 04 Javascript
js检测用户输入密码强度
Oct 22 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
Angularjs分页查询的实现
Feb 24 #Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 #Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
几行js代码实现自适应
Feb 24 #Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 #Javascript
You might like
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
django自定义模板标签过程解析
2019/12/14 Python
django ajax发送post请求的两种方法
2020/01/05 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
小学优秀教师先进事迹材料
2014/12/16 职场文书
525心理健康活动总结
2015/05/08 职场文书
春节晚会开场白
2015/05/29 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
python小程序之飘落的银杏
2021/04/17 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技