layUI实现多文件上传

最新推荐文章于 2025-09-11 02:24:52 发布

原创最新推荐文章于 2025-09-11 02:24:52 发布 · 2.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#java

springboot 专栏收录该内容

9 篇文章

订阅专栏

前端：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layPage快速使用</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/layui/css/layui.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>

        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
            <div class="layui-upload-list" style="max-width: 1000px;">
                <table class="layui-table">
                    <colgroup>
                        <col>
                        <col width="150">
                        <col width="260">
                        <col width="150">
                    </colgroup>
                    <thead>
                    <tr><th>文件名</th>
                        <th>大小</th>
                        <th>上传进度</th>
                        <th>操作</th>
                    </tr></thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        </div>



        <script src="/layui/layui.js"></script>
        <script>
            layui.use(['upload', 'element', 'layer'], function(){

                var upload = layui.upload;
                //演示多文件列表
                upload.render({
                    elem: '#testList'
                    ,elemList: $('#demoList') //列表元素对象
                    ,url: '/upload/file'
                    ,accept: 'file'
                    ,multiple: false
                    ,number: 3
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,accept: "images|file|video|audio"
                    ,exts: 'jpg|png|gif|bmp|jpeg|zip|rar|7z|pdf|doc|docx|xls|xlsx|avi|mp4|rmvb|wmv|txt|pub|pptx|ppt'
                    ,choose: function(obj){
                        var that = this;
                        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><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></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 值，以免删除后出现同名文件不可选
                            });

                            that.elemList.append(tr);
                            element.render('progress'); //渲染新加的进度条组件
                        });
                    }
                    ,done: function(res, index, upload){ //成功的回调
                        var that = this;
                        //if(res.code == 0){ //上传成功
                        var tr = that.elemList.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(3).html(''); //清空操作
                        delete this.files[index]; //删除文件队列已经上传成功的文件
                        return;
                        //}
                        //this.error(index, upload);
                    }
                    ,allDone: function(obj){ //多文件上传完毕后的状态回调
                        console.log(obj)
                    }
                    ,error: function(index, upload){ //错误回调
                        var that = this;
                        var tr = that.elemList.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                        element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                    }
                });
                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

            })
        </script>
    </body>

</html>

后端：

   <!--文件上传相关-->
        <dependency>
            <groupId>commons-net</groupId>
            <artifactId>commons-net</artifactId>
            <version>3.1</version>
        </dependency>
        <dependency>
            <groupId>com.jcraft</groupId>
            <artifactId>jsch</artifactId>
            <version>0.1.49</version>
        </dependency>
        <dependency>
            <groupId>ch.ethz.ganymed</groupId>
            <artifactId>ganymed-ssh2</artifactId>
            <version>261</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.28</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.3</version>
        </dependency>

controller（返回类型必须遵循该ui框架的格式，所以创建了个map）:

package com.wang.controller;

import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wang.utils.FileUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/upload")
public class UploadController {

    @Autowired
    private static final ObjectMapper MAPPER = new ObjectMapper();

    @PostMapping("/file")
    public String upload(@RequestParam("file") MultipartFile file) throws JsonProcessingException {
        try {

            if (Objects.isNull(file) || file.isEmpty()) {
                //判断非空
                Map<String, Object> map3 = new HashMap<>();
                map3.put("code", 201);
                map3.put("msg", "文件为空，请重新上传");
                map3.put("data", "文件为空，请重新上传");
                return MAPPER.writeValueAsString(map3);
            }
            byte[] bytes = file.getBytes();
            //要存入本地的地址放到path里面
            Path path = Paths.get( FileUtils.UPLOAD_FOLDER + "/");
            //如果没有files文件夹，则创建
            if (!Files.isWritable(path)) {
                Files.createDirectories(path);
            }
            //String extension = FileUtils.getFileExtension(file);  //获取文件后缀
            FileUtils.getFileByBytes(bytes, FileUtils.UPLOAD_FOLDER, file.getOriginalFilename());
            System.out.println(file.getOriginalFilename());

            Map<String, Object> map = new HashMap<>();
            map.put("code", 200);
            map.put("msg", "上传成功");
            map.put("data", "上传成功");

            return MAPPER.writeValueAsString(map);
        } catch (Exception e) {
            e.printStackTrace();
        }
        Map<String, Object> map2 = new HashMap<>();
        map2.put("code", 201);
        map2.put("msg", "上传失败");
        map2.put("data", "上传失败");
        return MAPPER.writeValueAsString(map2);
    }
}