angularjs上传多张图片并预览

1.   
2. angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) {  
3.     return {  
4.         restrict:'A',  
5.          link:function(scope, element, attrs, ngModel) {  
6.             var model = $parse(attrs.fileModel);  
7.             var modelSetter = model.assign;  
8.             var imgviewID = attrs["imgViewId"];  
9.             var imgView = angular.element(document.querySelector("."+imgviewID));  
10.             element.bind('change', function(event) {  
11.                 scope.$apply(function() {  
12.                     modelSetter(scope, element[0].files[0]);  
13.                 });  
14.                 //附件预览  
15.                 scope.file = (event.srcElement || event.target).files[0];  
16.                 fileReader.readAsDataUrl(scope.file, scope).then(function(result) {  
17.                     imgView.attr("src",result);  
18.                 });  
19.             });  
20.         }  
21.     }  
22. }]);  
23.   
24. angular.module('routerModule').factory('fileReader', ["$q", "$log", function($q, $log) {  
25.     var onLoad = function(reader, deferred, scope) {  
26.         return function() {  
27.             scope.$apply(function() {  
28.                 deferred.resolve(reader.result);  
29.             });  
30.         }  
31.     }  
32.   
33.     var onError = function(reader, deferred, scope) {  
34.         return function() {  
35.             scope.$apply(function() {  
36.                 deferred.reject(reader.result);  
37.             });  
38.         };  
39.     };  
40.       
41.     var getReader = function(deferred, scope) {  
42.         var reader = new FileReader();  
43.         reader.onload = onLoad(reader, deferred, scope);  
44.         reader.onerror = onError(reader, deferred, scope);  
45.         return reader;  
46.     };  
47.       
48.     var readAsDataURL = function(file, scope) {  
49.         var deferred = $q.defer();  
50.         var reader = getReader(deferred, scope);  
51.         reader.readAsDataURL(file);  
52.         return deferred.promise;  
53.     }  
54.     return {  
55.         readAsDataUrl: readAsDataURL  
56.     };  
57.   }  
58. ]);  
59.       

html关键代码

[html] view plain copy

1. <section class="infogroup">  
2.     <h4>法人证件</h4>  
3.     <div class="row relatedCard">  
4.         <div class="col-md-4 txtcenter">  
5.             <p>身份证正面</p>  
6.             <div><img ng-src="showImg/{{dealer.idCardFace}}" class="idCardFace" enlarge-pic/></div>  
7.             <span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑  
8.                  <input type="file" file-model="idCardFace" img-view-id="idCardFace" />  
9.             </span>   
10.         </div>  
11.         <div class="col-md-4 txtcenter">  
12.             <p>身份证反面</p>  
13.             <div><img ng-src="showImg/{{dealer.idCardBack}}" class="idCardBack" enlarge-pic/></div>  
14.             <span class="btn btn-file btn btn-xs btn-primary btn-editable picEdit"><i class="fa fa-edit"></i> 点击编辑  
15.                  <input type="file" file-model="idCardBack" img-view-id="idCardBack" />  
16.             </span>   
17.         </div>                                        
18.     </div>  
19. </section>  

controller.js中发送到后台的数据

[javascript] view plain copy

1. $scope.postData = {  
2.     dealerId: $scope.dealer.dealerId,  
3.     companyName: $scope.dealer.companyName,  
4.     companySize: $scope.dealer.companySize,  
5.     idCardFace: angular.element(document.querySelector(".idCardFace"))[0].src,  
6.     idCardBack: angular.element(document.querySelector(".idCardBack"))[0].src  
7. };  
8. $http.post('updateDealerCertificate',$scope.postData).success(function(data){  
9. <!-- 成功执行代码 -->  
10. });  

预览如下：