AngularJs 实现多图片上传并预览

多图片上传并预览，本例子，可以使用Angularjs实现，也可以单独把核心的js取出来使用。
图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到文件读取（FileReader）。
同时结合了Bootstrap5，下面可直接运行并附上了完整代码：
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/bootstrap/5.3/bootstrap.min.css">
    <script src="/user/js/angular-1.5.8.min.js"></script>
</head>
<body ng-app="app">
    <br/>
    <div ng-controller="shareCaptureCtrl">
        <ul class="d-flex list-unstyled">
            <li class="position-relative me-3" ng-repeat="imageSrc in imgshows track by $index">
                <img class="img_size" ng-src="{{imageSrc}}">
                <span ng-click="uploadimg_del($index, imgshows)" class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
                    <span class="visually-hidden">x</span>
                </span>
            </li>
            <li class="position-relative me-3">
                <img class="img_size" src="https://www.orchome.com/images/user/noHeadPortrait.png" alt="">
                 <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
                    <span class="visually-hidden">x</span>
                  </span>
            </li>
            <li class="add_btn position-relative">
                <div class="w-100 h-100 bg-light d-flex align-items-center">
                    <label for="upload_img" class="btn btn-default text-secondary">选择图片</label>
                    <input
                          type="file"
                          id="upload_img"
                          name="upload_img"
                          file="upload_img"
                          accept="image/png,image/gif,image/jpeg,image/jpg"
                          style="display:none"/>
                </div>
            </li>
        </ul>
    </div>
</body>
<script>
    var app = angular.module("app", []);

    function fileReader ($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);
            reader.readAsDataURL(file);
            return deferred.promise;

        };

        return {
            readAsDataUrl: readAsDataURL
        };
    }

    function file($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的时候会有
                                console.info(scope.uploadimgs);
                            });
                    }
                });
            }
        };
    }

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

        $scope.save = function() {
            var Fromdata = {
                'name': $scope.form.name,
                'desc': $scope.form.descr,
                'price': $scope.form.price,
                'status': $scope.form.status?1:0,
            }
            var uploadData = createFromData(Fromdata)
            for(var i = 0; i < $scope.uploadimgs.length; i++) {
                uploadData.append('upload_imgs', $scope.uploadimgs[i])
            }

            $http({
                method:'POST',
                url:"后台地址",
                data: fd,
                headers: {'Content-Type':undefined},
                transformRequest: angular.identity
            })
            .success( function(response){
                //上传成功的操作
            });
        }

        // 构造FormData
        // @param 是一个对象
        function createFromData(Fromdata) {
            var fd = new FormData();
            for(key in Fromdata) {
                fd.append(key,Fromdata[key]);
            }
            return fd
        }
    }
    app.factory('fileReader', fileReader).directive('file', file).controller('shareCaptureCtrl', shareCaptureCtrl);
</script>

<style type="text/css">
    .img_size{
        width: 100px;
        height: 100px;
    }

    .add_btn{
        width: 100px;
        height: 100px;
        border: 1px dotted #ccc;
        display: inline-block;
    }
</style>
</html>
在线运行
AngularJs 实现多图片上传并预览

昵称
