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

需求：上传多张图片后，需要手动拖拽排序，传给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>

例图完美~

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

简单的demo

diuren1205

引用和评论

vue+element 实现tagsView功能

对 Angular HTTP 请求使用总结

这个前端神器，竟让滴滴、美团都爱不释手？！

文件/文件夹拖拽上传

实现 Angular 程序处理进度条

如何理解 new (...args: any[]) =＞ any

基础思想总结