前端上传多个图片（实现了拖拽图片进行交换图片）

在前端页面的form表单中写如下代码：
注：里面有一张add.png的图片，可以找适当的图片替换

 <div class="layui-form-item" style="margin-top: 15px;">
            <label class="layui-form-label" style="margin-left: 20px;">轮播图：</label>
            <div class="imgcon1" style="float: left;margin-left: 16px;"></div>
            <input id="videoImage1" name="lunbo" type="hidden" value="">
            <div class="addimg1" style="float: left;margin-left: 16px;">
                <div class="" id="drag1" title="将文件拖拽到此处上传">
                    <label for="fileupload1" title="点击上传">
                        <img alt="" src style="height: 100px;width: 100px;" th:src="@{/xadmin/images/add.png}">
                    </label>
                </div>
                <input accept="image/*" data-url="/recycle/goods/uploadImg" id="fileupload1" multiple="multiple" name="imageFile"
                       style="display: none" type="file">
            </div>
        </div>

注意这句:

<input accept="image/*" data-url="/recycle/goods/uploadImg" id="fileupload1" multiple="multiple" name="imageFile"
                       style="display: none" type="file">

其中的data-url是一个访问地址，在下面的controller中会写到
在<script>标签中写上如下代码：

<!--拖动图片交换位置-->
<script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }

    var srcdiv = null;
    function drag(ev,divdom)
    {
        srcdiv=divdom;
        ev.dataTransfer.setData("text/html",divdom.innerHTML);
    }

    function drop(ev,divdom)
    {
        ev.preventDefault();
        if(srcdiv != divdom){
            srcdiv.innerHTML = divdom.innerHTML;
            divdom.innerHTML=ev.dataTransfer.getData("text/html");
        }
    }
</script>
<script>

    //删除图片
    function closeImg1(obj) {
        $(obj).parent().remove();
        // var goods_img = '';
        // $('.imgcon .img_div').each(function () {
        //     goods_img += $(this).find('img').attr('src') + ',';
        // })
        $('#videoImage1').val('');

        if ($('.imgcon1').children().length == 1) {
            $('.addimg1').css('display', 'none');
        }
        if ($('.imgcon1').children().length < 1) {
            $('.addimg1').css('display', 'inline-block');
        }
    }

    //上传图片
    $(function () {
        $('#fileupload1').fileupload({
            dataType: 'json',
            dropZone: $('#drag1'),
            change: function (e, data) {
                var len = $('.imgcon1').children().length;
                // if (data.files.length > (3 - parseInt(len))) {
                //     layer.msg('最多上传3张图片');
                //     return false;
                // }
            },
            start: function (e) {
                layer_msg = layer.msg('正在上传中…', {time: 100000000});
            },
            progressall: function (e, data) {
                $('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
            },
            done: function (e, data) {
                layer.close(layer_msg);
                callback(data.result.msg);
            }
        });
        $('#drag1').bind('drop dragover', function (e) {
            e.preventDefault();
        }).on('dragenter', function (e) {
            $(this).addClass('dragenter');
        }).on('drop', function (e) {
            $(this).removeClass('dragenter');
        }).on('dragleave', function (e) {
            $(this).removeClass('dragenter');
        });

        /**
         * 数据回调
         * @param id
         * @param value
         */
        function callback(value) {
            var $li = $(
                "<div class=\"img_div\" style=\"position: relative;float:left;margin-right: 10px;\" οndrοp="drop(event,this)" οndragοver="allowDrop(event)" draggable="true" οndragstart="drag(event, this)">" +
                "<a οnclick=\"$(this).attr('href', $(this).find('img').attr('src'))\" type=\"button\"  data-lightbox=\"preview\">" +
                "<img src=\"" + value + "\" alt=\"\" style=\"width: 100px;\">" +
                "<input class='videoImage1' type='hidden' value=\"" + value + "\" name='lunbotu'>" +
                "</a>" +
                "<i class='layui-icon layui-icon-delete close' οnclick='closeImg1(this)' " +
                "style=\"position: absolute;top: -11px;right: -11px;color: red;font-weight: bolder;font-size: 22px;\"></i>" +
                "</div>"
            );

            $('.imgcon1').append($li);
            console.log($("#videoImage1"))
            $("#videoImage1").val(value);
            if ($('.imgcon1').children().length == 1) {
                $('.addimg1').css('display', 'none');
            }
            // var goods_img = '';
            // $('.imgcon .img_div').each(function () {
            //     goods_img += $(this).find('img').attr('src') + ',';
            // })
            $('.goods_img1').val($(this).find('img').attr('src'));
        }

        //图片回显
        if ("$document.getElementsByName('name')" != '') {
            var goods_img = $(document.getElementsByName('name'));
            $('.goods_img1').val(goods_img);
            // var arr = goods_img.split(',');
            // for (var i = 0; i < arr.length; i++) {
            //     if (arr[i] != '') {
            //         callback(arr[i]);
            //     }
            // }
            if ($('.imgcon1').children().length == 1) {
                $('.addimg1').css('display', 'none');
            }

        }
    });
    </script>

注意在前端页面中引如如下的js文件：

<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js}" src="static/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js}" src="static/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js}" src="/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js"></script>

这个就是上面提到的data-url的访问地址了：

@Controller
@RequestMapping("/recycle/goods")
public class GoodsController extends BaseController  {
	/**
     * 添加页面图片保存跳转
     */

    String path = "";

    @PostMapping("uploadImg")
    @ResponseBody
    public AjaxResult addFile(@RequestParam("imageFile") MultipartFile imageFile) {
        path = OssFileUtils.uploadSingleFile(imageFile);
        return success(path);
    }
	    /**
	* 添加
	* @param goods
	* @return
	*/
	@PostMapping("add")
	@ResponseBody
	@NoRepeatSubmit
	public AjaxResult add(String lunbotu){
		boolean  flag= goodsService.add(lunbotu);
		return toAjax(flag);
	}
}

上面写的add方法中，是在假设我的数据库中只有两个字段的情况下，一个是自增的id，另一个就是轮播图的阿里云地址。
add方法如下：

/**
     * 多图片上传
     */
    @Override
    public boolean add(String lunbotu) {
        //处理轮播图
        if (StringUtils.isNoneBlank(lunbotu)) {
            String[] imgs = lunbotu.split(",");
            for (String s : imgs) {
                goodsMapper.insertIntoLinks(s);
            }
            return true ;
        }
        return false ;
    }

这样就可以把多张图片都存到数据库里了。