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

directive.js

/* * 多图片上传及预览指令（需指定图片类名)* */棱角分明。模块(“routerModule”).指令(“文件模型”，[“$ parse”，“文件阅读器”，函数($parse，file reader){ return { restrict : ' A '，link:function(scope，element，attrs，ng model){ var model=$ parse(attrs。文件模型)；var model setter=model . assign var IMgViewid=attrs[' IMgViewid ']；var imgView=angular。元素(文档。queryselector(' . ')imgviewID))；element.bind('change '，function(event) { scope .$apply(function() { modelSetter(作用域，元素[0])。文件[0]);});//附件预览范围。文件=(事件。srcelelement | |事件。目标).文件[0];文件阅读器。readasdataurl(作用域。文件，范围).然后（函数（结果){ imgView.attr('src '，结果)；});});} } }]);angular . module(routerModule).工厂(' fileReader '，['$q '，' $log '，函数($q，$ log){ var OnLoad=function(reader，delivered，scope) { return function() { scope .$ apply(function(){已交付。解决(读者。结果)；});} } var onError=function(reader，delivered，scope) { return function() { scope .$ apply(function(){已交付。拒绝(读者。结果)；});};};var getReader=函数(延迟，作用域){ var reader=new file reader()；reader.onload=onLoad(reader，delivered，scope)；reader.onerror=onError(reader，delivered，scope)；返回阅读器；};var readAsDataURL=函数（文件，范围){ var delived=$ q . delived()；var reader=getReader(延迟，作用域);reader.readAsDataURL(文件);延期归还。}返回{ readAsDataURL : readAsDataURL }；} ]);超文本标记语言关键代码

section class='infogroup' h4法人证件/H4分部='行相关卡'分部=' col-MD-4 txt中心' p身份证正面/p部门ng-src=' Http :应mg/{ }经销商。idcardFace } expand-pic//div span=' BTN BTN-文件BTN BTN-xs BTN-初选BTN-可编辑picEdit'i class='fa fa-edit'/i点击编辑输入类型=' file ' file-model=' id card face ' img-view-id=' id card face '/span/div class=' col-MD-4 txt center ' p身份证反面/p部门ng-src=' Http :应为mg/{ {经销商。idCardBack }扩展-pic//div span=' BTN BTN-文件BTN BTN-xs BTN-初选BTN-可编辑的picEdit'i class='fa fa-edit'/i点击编辑输入类型=' file ' file-model=' idCardBack ' img-view-id=' idCardBack '/span/div/div/section controller。射流研究…中发送到后台的数据

$ scope。PostDATa={ dealerid : $作用域。经销商。公司名称：美元范围。经销商。公司名称，公司规模：美元范围。经销商。公司尺寸，idcardface :棱角分明。元素(文档。queryselector(' .idcardFace')[0].src，idcardback :角度。元素(文档。queryselector(').idCardBack')[0].src }；$ http。post(' updateDealerCertificate '，$scope.postData).成功（函数（数据){!-成功执行代码- });预览如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。