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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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数据库操作类
2007/09/02 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python内置函数delattr的具体用法
2017/11/23 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
学期自我鉴定范文
2013/10/01 职场文书
创意广告词
2014/03/17 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
小时代观后感
2015/06/10 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
小学数学教师研修日志
2015/11/13 职场文书
施工安全责任协议书
2016/03/23 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫