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

/*  * 多图片上传及预览指令(需指定图片类名)  *  */  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  };  } ]); 

<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> 

$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){ <!-- 成功执行代码 --> });