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 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
一起来看看Vue的核心原理剖析
Mar 24 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
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PDO::errorCode讲解
2019/01/28 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery等待效果示例
2014/05/01 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
写给女生的道歉信
2014/01/14 职场文书
初中科学教学反思
2014/01/21 职场文书
演讲主持词
2014/03/18 职场文书
应聘英语教师求职信
2014/04/24 职场文书
大学生工作自荐书
2014/06/16 职场文书
小学生家长意见
2015/06/03 职场文书
800字作文之大雪
2019/12/04 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
python创建字典及相关管理操作
2022/04/13 Python