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: $panyName,companySize: $panySize,idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src,idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src};$http.post('updateDealerCertificate',$scope.postData).success(function(data){<!-- 成功执行代码 -->});
预览如下：
