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

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

上面是HTML代码

//图片读取
app.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(); //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);
        //将图片转换为Base64
        reader.readAsDataURL(file);
        return deferred.promise;

    };

    return {
        readAsDataUrl: readAsDataURL
    };
}]);

//文件预览
app.directive('file', ['$parse', 'fileReader', function($parse, fileReader) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, ngModel) {
            var model = $parse(attrs.file);
            var modelSetter = model.assign;
            element.bind('change', function(event) {
                scope.$apply(function() {
                    modelSetter(scope, element[0].files[0]);
                });
                //附件预览
                scope.imgupload = (event.srcElement || event.target).files[0];
                getFile(scope.imgupload, scope);
                //获得预览图地址并且把file对象放入上传合集内
                function getFile(imgupload, scope) {
                    if (!imgupload) {
                        return;
                    }
                    fileReader.readAsDataUrl(imgupload, scope)
                        .then(function(result) {
                            scope.imgshows.push(result);
                            var file = document.querySelector('input[type=file]').files[0];
                            scope.uploadimgs.push(file); //这里是放着传给后台的数据file，下面controller的时候会有
                            angular.element(document.querySelector("#fileImg")).val('');
                        });
                }
            });
        }
    };
}]);

$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) {
  
            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('提交失败正确填写！');

            }
        }