layUI多文件上传

前端HTML

<div class="layui-input-inline">
             <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
             <button type="button" class="layui-btn layui-btn-normal" id="test9">选择文件</button>
   </div>
<label class="layui-form-label">图片</label>
<div class="layui-input-inline">
             <div class="layui-upload-drag" id="picturePath" >
               <i class="layui-icon"></i>
               <p>点击上传，或将文件拖拽到此处</p>
             </div>
</div>

JS代码

upload = layui.upload;
form = layui.form;

  //选完文件后不自动上传
 upload.render({
    elem: '#test8'
    ,auto: false
    ,choose: function(obj){
       vifiles = obj.pushFile();  //文件1
    }
  });

//选完文件后不自动上传
  upload.render({
    elem: '#test9'
    ,auto: false
    ,choose: function(obj){
      zipfiles = obj.pushFile();   //文件1
    }
  });
//文件图片上传
upload.render({
        elem: '#picturePath'
        ,accept: 'images'
        ,acceptMime: 'image/*'
        ,method: 'post'
        ,multiple: false
        ,drag:true
        ,auto: false
        ,choose:function(obj){
            //单文件上传，每次都清空文件对象
             for(index in files){
                delete files[index];
             }
             files = obj.pushFile();
             //图像预览，如果是多文件，会逐个添加。(不支持ie8/9)
             obj.preview(function(index, file, result){
                 var imgBox = document.createElement("div");//预览图、删除预览图按钮容器
                 var imgobj = new Image(); //创建新img对象

                 imgBox.style.float = 'left';
                 imgBox.style.position = 'relative';

                 imgobj.src = result; //指定数据源
                 imgobj['layer-src'] = result;
                 imgobj.alt = file.name;
                 imgobj.className = 'layui-upload-img';
                 imgobj['layer-index'] = index;
                 imgobj.width=100;
                 imgobj.height=100;
                 imgBox.appendChild(imgobj);
                $("#demo2").html(imgBox);

             });
        }
        ,done: function(res){
          //上传完毕
        }
      });

//表单提交
form.on('submit(addBrand)', function(data){
        var myForm = document.getElementById("brandForm");
        var formData = new FormData(myForm);

        if(!files || !is_obj_empty(files)){
           layer.msg('请上传商标图片',{icon:2});
           return false;
        }
        //循环 files(第一步choose回调中储存的对象)  逐条插入到formData
        for (var i in files) {
            formData.append("imageFile",files[i]);//此处的imageFile为上传接口参数名
        }
        for(var vi in vifiles){
            formData.append("viFile",vifiles[vi]); //此处的viFile为上传接口参数名
        }
        for(var vi in zipfiles){
            formData.append("zipFile",zipfiles[vi]);  //此处的zipFile为上传接口参数名
        }
        var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
        var msg,flag=false;

        $.ajax({
            url: ctx+"/brand/add",
            type: "POST",
            data: formData,
            async: false,
            contentType: false,
            processData: false,
            error: function () {
                layer.msg('网络超时',{icon:2});
            },
            success: function (d) {
               if(d.code==0){
                    msg="商标添加成功！";
                    flag=true;
                    $("#brandForm")[0].reset();   //表单重置
                    $("#demo2").html("");   //清空图片预览
                    for (var i in files) {
                        delete files[i]//此处的files中的数据
                    }
                }else{
                    msg=d.msg;
                }
            }
        })
        setTimeout(function(){
            top.layer.close(index);
            if(flag){
                top.layer.msg(msg,{icon: 1});
                top.layer.close(index);
            }else{
                top.layer.msg(msg,{icon: 5});
            }
        },2000);
        return false;
    });

后端java代码接受

@RequestMapping("/brand/add")
public String addBrand(BrandDTO brandDTO, @RequestParam("imageFile") MultipartFile file,
                               @RequestParam("viFile") MultipartFile viFile,@RequestParam("zipFile") MultipartFile zipFile){

}

brandDto对应的是form表单中的参数字段。

这样就可以完成layui多文件上传了。