欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 23:10:57
本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下 directive.js /* * 多图片上传及预览指令...

本文实例为大家分享了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实现多张图片上传并预览功能

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