angularjs 实现多个图片上传及预览

 1 <div class="form-group">
 2                     <label>上传申请单</label>
 3                     <ul class="list_img clearfix">
 4                         <li ng-repeat="imageSrc in imgshows track by $index">
 5                             <img ng-src="{{imageSrc}}" alt="" class="imgs">  //显示图片
 6                             <span ng-click="uploadimg_del($index,imgshows)" class="delete">X</span>  //删除按钮
 7                         </li>
 8                         <li class="add_btn">
 9                             <label class="bgimg" for="fileImg"></label>
10                             <div class="file-box">
11                                 <input type="file" name="upload_img" file="upload_img" placeholder="选择图片" accept="image/*" class="file-btn" id="fileImg" />
12                             </div>
13                         </li>
14                     </ul>
15                 </div>

 1 //图片读取
 2 app.factory(‘fileReader‘,[‘$q‘,‘$log‘,function($q,$log) {
 3     var onLoad = function(reader,deferred,scope) {
 4         return function() {
 5             scope.$apply(function() {
 6                 deferred.resolve(reader.result);
 7             });
 8         };
 9     };
10 
11     var onError = function(reader,scope) {
12         return function() {
13             scope.$apply(function() {
14                 deferred.reject(reader.result);
15             });
16         };
17     };
18 
19     var getReader = function(deferred,scope) {
20         var reader = new FileReader(); //fileReader
21         reader.onload = onLoad(reader,scope);
22         reader.onerror = onError(reader,scope);
23         return reader;
24     };
25 
26     var readAsDataURL = function(file,scope) {
27         var deferred = $q.defer();
28         var reader = getReader(deferred,scope);
29         //将图片转换为Base64
30         reader.readAsDataURL(file);
31         return deferred.promise;
32 
33     };
34 
35     return {
36         readAsDataUrl: readAsDataURL
37     };
38 }]);
39 
40 //文件预览
41 app.directive(‘file‘,[‘$parse‘,‘fileReader‘,function($parse,fileReader) {
42     return {
43         restrict: ‘A‘,44         link: function(scope,element,attrs,ngModel) {
45             var model = $parse(attrs.file);
46             var modelSetter = model.assign;
47             element.bind(‘change‘,function(event) {
48                 scope.$apply(function() {
49                     modelSetter(scope,element[0].files[0]);
50                 });
51                 //附件预览
52                 scope.imgupload = (event.srcElement || event.target).files[0];
53                 getFile(scope.imgupload,scope);
54                 //获得预览图地址并且把file对象放入上传合集内
55                 function getFile(imgupload,scope) {
56                     if (!imgupload) {
57                         return;
58                     }
59                     fileReader.readAsDataUrl(imgupload,scope)
60                         .then(function(result) {
61                             scope.imgshows.push(result);
62                             var file = document.querySelector(‘input[type=file]‘).files[0];
63                             scope.uploadimgs.push(file); //这里是放着传给后台的数据file，下面controller的时候会有
64                             angular.element(document.querySelector("#fileImg")).val(‘‘);
65                         });
66                 }
67             });
68         }
69     };
70 }]);

$scope.imgshows = [];
        $scope.uploadimgs = []; //上传图片合集放的是file对象
        $scope.uploadimg_del = function(index,imgs) {
            $scope.imgshows.splice(index,1);
            $scope.uploadimgs.splice(index,1);
　　　　 }

//提交图片及其它信息
        $scope.addSample = function(sample,loding) {
            $scope.isSubmit();
            var fd = new FormData(); //初始化一个FormData实例
            fd.append(‘patientid‘,sample.patientId);
            fd.append(‘imgType‘,sample.imgType);
            fd.append(‘taskId‘,sample.taskId);
            fd.append(‘postCompany‘,sample.postCompany);
            fd.append(‘postNumber‘,sample.postNumber);
            for (var i = 0; i < $scope.uploadimgs.length; i++) {
                fd.append(‘file‘,$scope.uploadimgs[i])
            }
            if ($scope.sampleForm.$valid && $scope.uploadimgs.length > 0) {
                $loading.start(loding);
                //正常提交表单
                $http({
                    method: ‘post‘,data: fd,headers: { ‘Content-Type‘: undefined },transformRequest: angular.identity,url: baseUrl + ‘list_up/‘
                }).then(function(response) {
                    $loading.finish(loding);
                    $scope.confirm(response.data.message);
                },function() {
                    $loading.finish(loding);
                    $scope.alert(‘提交失败请与管理员联系！‘);
                })
            } else {
                // $scope.submitted = true;
                $scope.alert(‘提交失败正确填写！‘);

            }
        }