layui多文件上传列表后端Java

本文介绍如何使用LayUi实现多文件上传功能,包括前端界面设计、JavaScript交互逻辑及后端Java处理流程。前端利用LayUi组件库构建上传界面,通过监听按钮事件实现文件选择与上传;后端采用Java接收并处理上传文件,实现文件保存与响应结果反馈。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;
    }
}

<think>嗯,用户想了解如何使用Layui实现前端图片上传后端的功能。首先,我需要回顾一下Layui上传组件的基本用法。根据之前的引用内容,Layuiupload模块需要配置elem和url,可能还需要处理预览和回调。 接下来,用户需要前后端配合的示例。前端部分应该包括HTML元素和JavaScript配置,引用[2]中的代码示例可以作为参考,比如upload.render方法里的elem、url、multiple等参数设置。同时,要注意预览功能,可能需要用before回调里的preview方法生成缩略图,如示例中的append图片到某个div。 后端部分,用户可能用的是PHP或SpringMVC。引用[1]提到PHP后端接收文件并生成缩略图,而引用[3]和[4]涉及SpringMVC的实现。需要分别给出两种后端的处理示例。比如PHP中使用$_FILES获取上传文件,处理后再返回JSON数据。对于Java SpringMVC,可能需要用MultipartFile接收参数,并处理可能出现的null情况,如引用[2]中提到的问题。 另外,需要注意后端返回的数据格式是否符合Layui的要求,比如code为0表示成功,并返回src等字段。同时,要提醒用户检查文件大小限制、保存路径权限以及跨域问题,这些是常见错误点,引用[2]中提到的MultipartFile为null可能是因为参数名不一致,需要前后端统一name属性。 最后,生成相关问题时要覆盖常见问题,比如如何限制文件类型、多图上传、进度条显示和错误处理,这些都是用户可能进一步想了解的内容。需要确保回答结构清晰,分步骤说明前后端实现,并给出代码示例,同时引用相关的参考资料。</think>### 分步实现Layui图片上传功能 #### 一、前端实现(Layui配置) 1. **HTML结构** ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="uploadBtn">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="previewImg"> <p id="uploadText"></p> </div> </div> ``` 2. **JavaScript配置** ```javascript layui.use('upload', function(){ var upload = layui.upload; // 单文件上传配置 upload.render({ elem: '#uploadBtn', url: '/upload', // 后端接口地址 accept: 'images', // 限定图片类型 size: 5000, // 最大5MB before: function(obj){ // 预读本地文件 obj.preview(function(index, file, result){ $('#previewImg').attr('src', result); }); }, done: function(res){ if(res.code == 0){ // 上传成功 console.log('文件地址:', res.data.src); layer.msg('上传成功'); } }, error: function(){ layer.msg('上传失败'); } }); }); ``` #### 二、后端实现示例 ##### PHP版本(参考引用[1]) ```php <?php $file = $_FILES['file']; $uploadDir = 'uploads/'; // 生成唯一文件名 $filename = uniqid().'.'.pathinfo($file['name'], PATHINFO_EXTENSION); move_uploaded_file($file['tmp_name'], $uploadDir.$filename); // 生成缩略图(示例代码) $thumb = imagecreatetruecolor(200, 200); $source = imagecreatefromjpeg($uploadDir.$filename); imagecopyresized($thumb, $source, 0,0,0,0, 200,200, imagesx($source), imagesy($source)); imagejpeg($thumb, $uploadDir.'thumb_'.$filename); // 返回Layui标准格式 echo json_encode([ 'code' => 0, 'data' => [ 'src' => '/'.$uploadDir.$filename, 'thumb_src' => '/'.$uploadDir.'thumb_'.$filename ] ]); ?> ``` ##### Java SpringMVC版本(参考引用[3][4]) ```java @PostMapping("/upload") @ResponseBody public Map<String, Object> upload(@RequestParam("file") MultipartFile file) { Map<String, Object> result = new HashMap<>(); try { String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename(); Path path = Paths.get("uploads/" + fileName); Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); result.put("code", 0); result.put("data", Map.of( "src", "/uploads/" + fileName, "thumb_src", generateThumbnail(path) // 缩略图生成方法 )); } catch (Exception e) { result.put("code", 1); result.put("msg", "上传失败"); } return result; } ``` #### 三、关键注意点 1. **参数一致性**:前端`upload.render`的`name`参数默认是`file`,需与后端接收参数名一致[^2] 2. **文件存储**:确保服务器`uploads`目录有写入权限 3. **跨域问题**:若前后端分离,需配置CORS 4. **安全防护**:建议添加文件类型白名单验证 5. **缩略图生成**:推荐使用GD库(PHP)或Thumbnailator(Java
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值