最近的项目中遇到这样一个需求，要求在上传图片时可多图片上传，并且可以拖拽排序。前面多图片上传比较好实现，网上一大片的教程、插件可供学习使用，可又要求可以拖拽排序，我也没找到现有的代码，自己也就研究着尝试实现了下，实现的结果还是比较好的。大家有需要的可以参考下。

　　　废话不多说，直接上代码。

HTML代码：

CSS代码：

.img_wrapper {
         width: 100%;      display: flex;      flex-wrap: wrap;}.dragWrapper {
         position: relative;      width: 100%;      height: 208px;      box-sizing:border-box;      -moz-box-sizing:border-box; /* Firefox */      -webkit-box-sizing:border-box; /* Safari */}.dragWrapper img{
       width: 248px;    height: 208px;}.img_wrapper li{
       float: left;    overflow: hidden;    border: 2px solid transparent;    transition: border-color .2s ease-out;    margin: 10px;    height: 212px;    width: 252px;    cursor: pointer;    box-sizing:border-box;    -moz-box-sizing:border-box; /* Firefox */    -webkit-box-sizing:border-box; /* Safari */        }.img_wrapper li:hover{
       border: 2px solid #00b295;}.wrapConatiner{
       min-height: 522px;    border: 2px dashed #b8c4ce;    padding: 15px;} .dragWrapper em{
       color: #b8c4ce;    display: block;    width: 124px;    background-color: #FFFFFF;    border-bottom: 2px solid #00b295;    text-align: center;    cursor: pointer;  　height: 40px;    line-height: 40px;    background-color: #fff;    box-sizing:border-box;    -moz-box-sizing:border-box; /* Firefox */    -webkit-box-sizing:border-box; /* Safari */            }.btn_wrapper .btn{
       width: 120px;    height: 36px;    border-radius: 4px;    cursor: pointer;    border: 1px solid #98CEFA;    background: url(../images/upload.png)no-repeat center center;    margin-left: 13px;}

js代码：

$(document).ready(function() {                //选择文件点击事件                $(".btn").click(function(e){                        e.preventDefault();                         $("#files").trigger("click");                });                //保存文件数组                var imgFiles = [];                //记录当前文件数                var fileCount = 0;                //文件变化事件                $("#files").change(function() {                        var files = $(this)[0].files;                        var imageType = /^image\//;                        var namePrefix = $(this).data("name");                        for(var i = 0;i < files.length;i ++) {                                var file = files[i];                                var fileType = file.type;                                if(!imageType.test(fileType)) {                                        layui.use('layer', function(){                                            var layer = layui.layer;                                            layer.msg('请选择图片类型文件', {icon: 6});                                        });                                        return;                                }                                var fileName = file.name;                                //文件的唯一标识                                fileCount++;                                var fileId = namePrefix + '_' + fileName + '_' + fileCount;                                //保存文件到数组                                imgFiles.push({                                        id : fileId,                                        file : file                                });                        }                        //清空file框文件,可以连续选择同一文件                        $(this).val('');                        //刷新拖动排序                        $(".wrapConatiner").sortable('refresh');                        if($('#lineId').val()==''){                            layui.use('layer', function(){                                var layer = layui.layer;                                layer.msg('请填写基本信息！！！', {icon: 6});                            });                        }else{                            if(imgFiles.length < 1) {                                    layui.use('layer', function(){                                        var layer = layui.layer;                                        layer.msg('文件为空', {icon: 6});                                    });                                    return;                            }                            if(!uploadFinish) {                                    //文件正在上传                                    return;                            }                            uploadFinish = false;                            var formData = new FormData();                            $.each(imgFiles, function(index, value) {                                    var id = value.id;                                    formData.append(id, value.file);                            });                            $.ajax({                                    url: '',                                    data: formData,                                    type: 'POST',                                    cache: false,                                    contentType: false,                                    processData: false,                                    beforeSend:function(){                                        layer.load();                                    },                                    success: function(data){                                        console.log(data);                                        //清空文件数组                                        imgFiles = [];                                        //清空预览图片                                        $(".img_wrapper ul").html('');                                            var picData=data.data.dearGroup;                                            var picObj=JSON.parse(picData);                                            $.each(picObj,function(n,value){                                                $('.img_wrapper ul').append('
      
       ' +                                                    '
       '+                                                    '
       ' +                                                    '
       封面' +                                                    '
       删除
      
')                                                    })                                            layer.closeAll('loading');                                            layui.use('layer', function(){                                                var layer = layui.layer;                                                layer.msg(data.message, {icon: 6});                                            });                                                                                },                                    error: function(e) {                                            layer.closeAll('loading');                                            layui.use('layer', function(){                                                var layer = layui.layer;                                                layer.msg(e.message, {icon: 6});                                            });                                    },                                    complete: function() {                                            //设置请求完成                                            uploadFinish = true;                                    }                            });                            }                });                //图片拖动排序                var arr = '';                $(".wrapConatiner").sortable({                        items:'li',                        delay: 0,                        cursor: 'removeImg',                        revert: true,                        cursor: "move",                        scroll:true,                        stop:function (event) {                                //记录sort后的id顺序数组                                var arr = $(".wrapConatiner").sortable('toArray');                                var orderTag=arr.join(',');                                $.ajax({                                type: "POST",                                url: "",                                data: {orderTag:orderTag},                                dataType: "json",                                success: function(data){                                        console.log(data);                                             }                        });                        }                });                var uploadFinish = true;                /* 鼠标移入显示隐藏 */                $('.wrapConatiner').on('mouseover',".img_wrapper li",function(e){                        $(this).find('em').stop().animate({top:"0px"});                });                $('.wrapConatiner').on('mouseout',".img_wrapper li",function(e){                        $(this).find('em').stop().animate({top:"-40px"});                });        });    　　　　　　$(function(){            /* 删除回显的图片文件 */            $('.wrapConatiner').on('click','.removeImg',function(){
    var _this=$(this);                $.ajax({                    type:"POST",                    url:"",                    async:false,                    dataType:"json",                    data:{},                    success:function(data){                        _this.parent('.dragWrapper').remove();                        layui.use('layer', function(){                            var layer = layui.layer;                            layer.msg(data.message, {icon: 6});                        });                    },                    error:function(data){                        layui.use('layer', function(){                            var layer = layui.layer;                            layer.msg(data.message, {icon: 6});                        });                    }                });            })            /* 设为封面 */            $('.wrapConatiner').on('click','.setCover',function(){
    if(lineId != '' ){                            $.ajax({type:"POST",                        url:"",                        async:false,                        dataType:"json",                        data:{},                        success:function(data){                            console.log(data);                            layui.use('layer', function(){                                var layer = layui.layer;                                layer.msg(data.message, {icon: 6});                            });                         },                        error:function(data){                            console.log(data);                            layui.use('layer', function(){                                var layer = layui.layer;                                layer.msg(data.message, {icon: 6});                            });                         }                    });                }else{                    layui.use('layer', function(){                        var layer = layui.layer;                        layer.msg("参数错误", {icon: 5});                    });                 }                            })        })

效果图：

鼠标移入会有简单的动画效果，显示设为封面、删除图片两个功能按钮。

页面的引用文件有jquery.ui、layui。

这里用了jquery.ui的拖拽小部件，layui的弹出提示、加载动画。

结束。供大家在图片拖拽排序方面参考。