【文件上传】

最新推荐文章于 2024-09-08 10:40:56 发布

夏之目

最新推荐文章于 2024-09-08 10:40:56 发布

阅读量533

点赞数

分类专栏：程序文章标签： java spring boot json

本文链接：https://blog.csdn.net/qq_41918580/article/details/124546435

版权

程序专栏收录该内容

25 篇文章 4 订阅

订阅专栏

springboot 文件上传

前言
1.controller
- 2.文件上传页面
部分截图如下
技术

前言

文件上传模块在各种程序中都需要运用到，需要做到根据不同的用户对文件上传的路径进行归类，各自的文件独自进行管理。

1.controller

public class FileControl {
    @Autowired
    private RegisterService registerService;
    @Autowired
    private LoginService loginService;
    @Autowired
    private FileService fileService;

    @RequestMapping(value = "/Login")
    public String index() {
        return "login";
    }
    @RequestMapping(value = "/login")
    @ResponseBody
    public String login(HttpServletRequest request) {
        //        获取账号密码
        String name = request.getParameter("name");
        String pass = request.getParameter("pass");
        User user = new User(name, pass);
        String s = loginService.loginService(user);
        return s;
    }

    //创建文件夹
    @RequestMapping(value = "/file")
    public String file(HttpServletRequest request, Model model, HttpServletResponse response) {
        String name = request.getParameter("name");
        String file = fileService.createFile(name, response, request);

        System.out.println("------------"+file);
        if (file == "无识别用户") {
            return "Login";
        } else {
            model.addAttribute("name", name);
            return "file";
        }
    }

    //文件上传
    @RequestMapping(value = "/upload")
    @ResponseBody
    public String upload(HttpServletRequest request, HttpServletResponse response) {
        String s = fileService.uploadFile(request);
        HashMap<String, Object> map = new HashMap<>();
        map.put("result", s);
        //转为json
        JSONObject jsonObject = new JSONObject(map);
        String res = jsonObject.toString();
        return res;
    }

    //文件列表
    @RequestMapping(value = "/filedata")
    @ResponseBody
    public JSONObject filedata(HttpServletRequest request) {
        String res = fileService.fileList(request);
        JSONObject jsonObject = JSON.parseObject(res);
        jsonObject.remove("message");
        return jsonObject;
    }
//    文件下载
    @RequestMapping(value = "/filedown")
    public void filedown(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException {
        fileService.fileDown(request, response);
    }
    //文件删除
    @RequestMapping(value = "/filedel")
    @ResponseBody
    public String filedel(HttpServletRequest request,HttpServletResponse response){
        String msg = "";
        msg = fileService.fileDel(request,response);
        return msg;

    }

2.文件上传页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>file</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!--    引入复制到剪切板插件-->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

    <style>
        #uplaod{
            position: absolute;
            left: 50%;
            top: 350%;
            transform: translate(-50%,-50%);
            width: 260px;
            height: 150px;
        }
        .table-location{
            /*border: 1px solid red;*/
            position: absolute;
            left: 50%;
            top: 1050%;
            transform: translate(-50%,-50%);
            width: 85%;
            height: 400px;
        }

    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row layui-bg-cyan">
            <div class="layui-col-md2 layui-col-md-offset10">
                <i class="layui-icon layui-icon-username" style="font-size: 45px;color: snow;" onclick="tologin()"></i>
                <span th:text = "${name}" style="font-size: 40px;margin-left: 15px;" id="myspan"></span>
            </div>
        </div>
        <div class="layui-row">
<!--            <img src="images/icon_Upload.png" id="uplaod">-->
            <div id="uplaod">
                <div class="layui-upload-list">
                    <!-- 文件选择框 -->
                    <div class="layui-upload-drag UploadBusi">
                        <div lay-filter="UploadToolsOne">
                            <i class="layui-icon" style="font-size: 50px !important;"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                        </div>
                        <span id="demo2" class="layui-form-label layui-hide" style="width: 166px;height: 55px;text-align: center"></span>
                        <img id="demo1" class="layui-upload-img layui-hide" style="height: 107px; width: 196px;"/>
                    </div>
                    <!-- 进度条样式 -->
                    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
                        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="table-location">
                <table class="layui-hide" id="test" lay-filter="test"></table>

                <script type="text/html" id="barDemo">

                    <a class="layui-btn layui-btn-xs" lay-event="down">下载</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
        </div>
        <input id="shareUrl" style="position: absolute;top: -110%" data-clipboard-text="" class="font-primary" value="">
    </div>

    <script>
        layui.use(['upload', 'element', 'layer','table'],function () {
            var $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer
                ,table = layui.table;
            var name = "[[${name}]]"
            //执行实例
            var uploadInst = upload.render({
                elem: '.UploadBusi',
                url: '/upload/',
                accept: 'file',
                multiple: true,
                data: {"name":name},
                size:204800,
                before: function(obj){
                    element.progress('demo', '0%'); //进度条复位
                    var uploadFileInput = $(".layui-upload-file").val();
                    var uploadFileName = uploadFileInput.split("\\");
                    $('#demo2').text(uploadFileName[uploadFileName.length - 1]);
                    $('#demo2').removeClass("layui-hide");
                    $('div[lay-filter="UploadToolsOne"]').addClass("layui-hide");
                    layer.msg('上传中', {icon: 16, time: 0,shade:[0.3, '#393D49']});
                },
                //进度条
                progress: function(n, elem, res, index){
                    element.progress('demo', n + '%');
                    console.log(index);
                },
                allDone: function (res) {
                    $('#demo2').addClass("layui-hide");
                    $('div[lay-filter="UploadToolsOne"]').removeClass("layui-hide");
                    layer.msg('上传完毕', {icon: 1});
                    table.reload('test',{
                        where: {'name':name},
                    });
                },
                error: function () {

                }
            })
            //生成文件表格
            table.render({
                elem: '#test'
                , url: '/filedata/'
                ,where: {'name':name}
                ,title: '文件数据表'
                ,height: 500
                , cols: [
                    [
                    {field: 'filename', title: '文件名', width: 500}
                    , {field: 'filetime', title: '创建时间', width: 190, sort: true}
                    , {field: 'filesize', title: '文件大小', width: 130, sort: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 170}
                    ]
                ]
                , page: false
            });
            //监听行工具事件
            table.on('tool(test)',function (obj) {
                var data = obj.data;
                if(obj.event === 'down'){
                    window.location.href= "/filedown?filename="+data.filename+"&name="+name
                }else if (obj.event === 'del'){
                    layer.confirm("真的要删除该文件？" ,function(index) {

                        $.ajax({
                            url: "/filedel/",
                            type: "post",
                            data: {"filename":data.filename,"name":name},
                            success: function (data) {
                                obj.del();
                                layer.close(index);
                                console.log(data);
                            }
                        })

                    })
                }
        })
        function tologin() {
            window.location.href = "/Login";
        }
    </script>
</body>
</html>