当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angularjs实现多张图片上传并预览功能

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

2018年05月01日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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){ 
<!-- 成功执行代码 --> 
});

预览如下：

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网