angularjs-多图上传删除及拖拽排序

5次阅读

共计 3835 个字符，预计需要花费 10 分钟才能阅读完成。

需求：上传多张图片后，需要手动拖拽排序，传给 java 后台 file
用 angularjs，sortablejs

简单的 demo

需要引入的 js 文件

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js"></script>
<script src="sortable/sortable.js"></script>

html

<body ng-app="app">
    <div ng-controller="sortCtrl">
        <ul class="list_img clearfix" ui-sortable="sortableOptions" ng-model="imgshows">
            <li ng-repeat="imageSrc in imgshows track by $index" >
                     <!--// 显示图片 -->
                <img ng-src="{{imageSrc}}"   alt="" /> 
                <!--// 删除按钮 -->
                <i ng-click="uploadimg_del($index, imgshows)" style="display: inline-block;position: absolute; top: -10px; right: -2px; cursor: pointer;">×</i>
            </li>
            <li class="add_btn">
                <label class="bgimg" for="fileImg"></label>
                <div class="file-box">
                    <img id="imgShow" onclick="$('#fileImg').click();"  src="img/systemicon_nav_img_18.png"/>
                    <input type="file"  style="display: none;" name="upload_img" file="upload_img"  accept="image/*" class="file-btn" id="fileImg" />
                </div>
            </li>
        </ul>
    </div>
</body>

style 样式

<style>
    .list_img{list-style: none;}
    .list_img li{
        position: relative;
        float: left;
        margin-right: 20px;
    }
    .list_img li img{
        width: 100px;
        height: 80px;
    }
</style>

js 内容

<script>
var app = angular.module("app", ["ui.sortable"]);
app.controller("sortCtrl", function($scope, $timeout) {
    // 拖拽排序
    $scope.sortableOptions = {
        // 数据有变化
        update: function(e, ui) {console.log("update");
        },
        // 完成拖拽动作
        stop: function(e, ui) {
            //do nothing
            console.log("do nothing");
        }
    }
    // 图片 ---------
    $scope.imgshows = [];
    $scope.uploadimgs = []; // 上传图片合集放的是 file 对象
    // 删除单图
    $scope.uploadimg_del = function(index, imgs) {$scope.imgshows.splice(index, 1);
        $scope.uploadimgs.splice(index, 1);
        console.log($scope.imgshows);
        console.log($scope.uploadimgs);
  }
        // 提交给后台图片及其它信息
    $scope.addSample = function(sample, loding) {$scope.isSubmit();
        var fd = new FormData(); // 初始化一个 FormData 实例
        // 传值 file
        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('提交失败正确填写！');

        }
    }
})
    // 图片读取，工厂函数
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);
                            console.log(scope.imgshows);
                            var file = document.querySelector('input[type=file]').files[0];
                            scope.uploadimgs.push(file); // 这里是放着传给后台的数据 file，下面 controller 的时候会有
                            console.log(scope.uploadimgs);
                            angular.element(document.querySelector("#fileImg")).val('');
                        });
                }
            });
        }
    };
}]);
</script>

例图完美~

正文完