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>

上面是HTML代碼

 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, deferred, 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, deferred, scope);
22         reader.onerror = onError(reader, deferred, 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(‘提交失敗正確填寫！‘);

            }
        }

angularjs 實現多個圖片上傳及預覽