layui 多个上传控件，前端预览+非自动上传方式实现

layui 上传控件非自动上传只能实现一个或的多个图片同时在一个上传控件中实现，并传回到controller处理上传结果

若需要多个上传控件上传图片，提交时再分别获取图片信息如何处理呢？

---经过测试可以采用ajax提交的方式实现

具体实现过程如下：

    <div class="layui-form-item">
            <label class="layui-form-label">按钮图标:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="uploadImageBtn">上传图片</button>
                <div id="uploadList" class="layui-upload-list">
                </div>
            </div>
        </div>

使用uploadTimes标识，防止重复上传时不触发。

  renderObj = upload.render({
        elem: '#uploadImageBtn'
        , url: 'url' //设置url
        , auto: false
        // , bindAction: '#commit'
        , field: 'image'
        , choose: function (obj) {
            uploadTimes += 1; 
             obj.preview(function (index, file, result) {
                 $('#uploadList').find('img').remove();
                 $('#uploadList').append('<img class="layui-upload-img" id="uploadImage" src="' + result + '">');
             });
            
        }
        , done: function (res, index, upload) {
            //处理上传结果
        }
    });

采用ajax方式传结果至后台处理。若有其他字段需要同时传值到后台处理，可以1、通过在form中添加name方式，利用data.field自动获取值；2、使用formData.append(name,val)方式主动添加值。

form.on('submit(demo1)', function (data) {
        var params = data.field;
        if (params.image === null || !params) {
            layer.msg("请上传图片", {icon: 2});
            return false;
        }
        var formData = new FormData();
        formData.append("data", JSON.stringify(params));
        $.ajax({
            type: 'POST',
            url: '//', //请求路径
            data: formData,
            dataType: "json",
            contentType: false,
            processData: false, 
            success: function (data) {
              //处理结果

            }
        });
        return false;
    });

java后台controller数据接收方式：

public Result uploadDataTest(HttpServletRequest request, HttpSession session, HttpServletResponse response) {
    try {
        String imagePath = "";
        CommonsMultipartResolver resolver = new CommonsMultipartResolver(request.getServletContext());
        if (resolver.isMultipart(request)) {
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            List<MultipartFile> images = multiRequest.getFiles("image"); //取上传文件
            // String name = multiRequest.getParameterValues("name"); --取其他参数
        }
       
        return Result.fail(-1, null, "error");
    } catch (Exception ex) {
        return Result.fail(-1, null, "test fatal");
    }
}

over.