layui多文件上传列表后端Java

LayUi多文件上传后端Java

前端代码

<div class="layui-form-item">
        <label class="layui-form-label">附件</label>
        <div class="layui-input-block layui-upload">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="AAAA">选择多文件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                        </thead>
                        <tbody id="demoListss"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
        </div>
        <input type="hidden" name="info" id="info">
    </div>

JavaScript代码

 var index = 2;//初始下标
    var uploadNa="";//初始一个文件上传变量
    var urls="null";
    layui.use(['form', 'table','laydate','upload'], function () {
        var form = layui.form, table = layui.table;
        var layer =layui.layer,upload = layui.upload;
        var url = "";// 访问路径
        
       var demoListView = $('#demoListss')
                        ,uploadListIns = upload.render({
                        elem: '#AAAA'
                        ,url: '${ctx}/w/uploadFileasdasdas'
                        ,accept: 'file'
                        ,multiple: true
                        ,auto: false
                        ,bindAction: '#testListAction'
                        ,choose: function(obj){
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function(index, file, result){
                                var tr = $(['<tr id="upload-'+ index +'">'
                                    ,'<td>'+ file.name +'</td>'
                                    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                    ,'<td>等待上传</td>'
                                    ,'<td>'
                                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                    ,'</td>'
                                    ,'</tr>'].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function(){
                                    obj.upload(index, file);
                                });

                                //删除
                                tr.find('.demo-delete').on('click', function(){
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });

                                demoListView.append(tr);
                            });
                        }
                        ,done: function(res, index, upload){
                            if(res.code == 0){ //上传成功
                            	//拼接字符串后台返回的路径
                                uploadNa=uploadNa+res.msg+",";
                                $("#uploadname").val(uploadNa);
                                //alert(uploadNa);
                                var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                tds.eq(3).html(''); //清空操作
                                return delete this.files[index]; //删除文件队列已经上传成功的文件
                            }
                            this.error(index, upload);
                        }
                        ,error: function(index, upload){
                            var tr = demoListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                    });
	})

Java代码

  */
    /**
     * 多文件上传
     * @param file
     * @return
     */
    @RequestMapping("/uploadFileasdasdas")
    @ResponseBody
    public WebPageVo uploadFile(@RequestParam("file") MultipartFile file){
        WebPageVo webPageVo = new WebPageVo();
        String fileName = null;
        String fileNowName = null;
        Boolean flag=false;
        Map<String,Object> param=new HashMap<>();
        if(file.isEmpty()){
            webPageVo.setMsg("文件不能为空");
            webPageVo.setCode(1);
            return webPageVo;
        }
        try{
			String path1 = Thread.currentThread().getContextClassLoader().getResource("").getPath();//获取当前资源的虚拟路径
			path1=path1+"upload/";
        	//创建一个文件夹
			Date date = new Date();
			//文件夹的名称
			String paths=path1+new SimpleDateFormat("yyyyMMdd").format(date);
			//如果不存在,创建文件夹
			File f = new File(paths);
			if(!f.exists()){
				f.mkdirs();
				//如果文件夹不存在创建一个
				fileName = file.getOriginalFilename();//获取原名称
				fileNowName = UUIDUtil.getUUID2()+"."+ FilenameUtils.getExtension(fileName);//生成唯一的名字
				File dest = new File(paths+"/"+fileNowName);
				file.transferTo(dest);
			}else{
				fileName = file.getOriginalFilename();//获取原名称
				fileNowName = UUIDUtil.getUUID2()+"."+ FilenameUtils.getExtension(fileName);//生成唯一的名字
				File dest = new File(paths+"/"+fileNowName);
				file.transferTo(dest);
			}

            webPageVo.setMsg(fileNowName);
            webPageVo.setCode(0);
        }catch(Exception e){
            e.printStackTrace();
            webPageVo.setMsg("上传失败,请重新上传");
            webPageVo.setCode(1);
        }
        return webPageVo;
    }

工具类

import java.util.UUID;

/**
 * UUID工具类
 * 
 * @author Mr.Ding
 * @time 2019年6月13日上午9:09:25
 */
public class UUIDUtil {
	/**
	 * 带-的UUID
	 * 
	 * @return 36位的字符串
	 */
	public static String getUUID() {
		return UUID.randomUUID().toString();
	}

	/**
	 * 去掉-的UUID
	 * 
	 * @return 32位的字符串
	 */
	public static String getUUID2() {
		return UUID.randomUUID().toString().replace("-", "");
	}

}

返回数据类

import com.crux.posms.vo.w.DictVo;
import com.crux.posms.vo.w.RoleFuncVo;
import org.springframework.stereotype.Component;

import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

/**
 * Created by bisj on 2019/1/17/017.
 */
@Component
public class WebPageVo {
    private int code;
    private String msg;
    private long count;
    private Collection<?> data;
    private String name;//临时添加
    private List<RoleFuncVo> roleFuncVosList;//临时添加

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public long getCount() {
        return count;
    }

    public void setCount(long count) {
        this.count = count;
    }

    public Collection<?> getData() {
        return data;
    }

    public void setData(Collection<?> data) {
        this.data = data;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<RoleFuncVo> getRoleFuncVosList() {
        return roleFuncVosList;
    }

    public void setRoleFuncVosList(List<RoleFuncVo> roleFuncVosList) {
        this.roleFuncVosList = roleFuncVosList;
    }
}