Springboor RestController 基于 jsp 向后端上传文件

最新推荐文章于 2023-05-18 15:48:30 发布

lbzheng

最新推荐文章于 2023-05-18 15:48:30 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/lbzheng/article/details/95675293

版权

后台

1 导依赖

<!--文件上传-->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
<!--热部署依赖 用着比较方便-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

2 配置application.properties 文件

server.port=8088
spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.enabled=true
#文件上传临时目录
spring.servlet.multipart.location=D:/Idea/uploadfiles
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp
#开启热布署
server.servlet.jsp.init-parameters.development=true

3 mapper

<insert id="register" useGeneratedKeys="true"  keyProperty="id">
    insert into  t_user (name,password,sex,birthDay,photo) values(#{name},
    #{password},#{sex},#{birthDay},#{photo})
</insert>

4 service

@Transactional(propagation = Propagation.REQUIRED,readOnly = false)
@Override
public void registerUser(User user) {
    userDAO.register(user);
}

5 controller

@PostMapping(value = "/user")
public User registerUser(@RequestPart(value = "user",required = false) User user,@RequestParam("multipartFile") MultipartFile multipartFile){
    System.out.println(multipartFile.getOriginalFilename());
    userService.registerUser(user);
    return user;
}

前台

<%@page pageEncoding="UTF-8" isELIgnored="false" contentType="text/html;Utf-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
    <html>
        <head>
            <meta charset="utf-8">
            <title>restbody ajax</title>
            <script src="${pageContext.request.contextPath}/static/jquery.min.js"></script>
            <script src="${pageContext.request.contextPath}/static/jquery.extend.js"></script>
            <script>
                $(function () {

                    //imgShow ：自定义插件
                    $("#rest_register_form input[type = 'file']").imgShow({
                        imageId: "photoId"
                    })

                    $("#rest_register_btn").click(function () {
                        var formData = new FormData();
                        var file = $("#rest_register_form input[type = 'file']")[0].files[0];
                        //serializeForm2JSON：自定义的插件库
                        var user = $("#rest_register_form").serializeForm2JSON();
                        formData.append("multipartFile",file);
                        console.log(user)
                        formData.append("user", new Blob([user],{type: "application/json"}));
                        $.ajax({
                            url: "${pageContext.request.contextPath}/UserManager/user",
                            type: "post",
                            contentType: false,//忽略contentType
                            processData: false,//取消序列换 formData本来就是序列化好的
                            dataType: "json",
                            data: formData,
                            success: function (data) {
                                alert("提交成功");
                            },
                            error: function () {
                                alert("出错了！")
                            }
                        });
                    });
                })
            </script>
        </head>
        <body>

            <form id="rest_register_form">
                <table style="text-align: center;" border="1" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <td>标题</td><td>控件</td><td>图片</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>用户名</td><td><input name="name" type="text"></td>
                            <td rowspan="3"><img id="photoId" width="50" alt="头像"/></td>
                        </tr>
                        <tr>
                            <td>密&nbsp;码</td><td><input name="password" type="password"></td>
                        </tr>
                        <tr>
                            <td>头&nbsp;像</td><td><input type="file" name="multipartFile"></td>
                        </tr>
                    </tbody>
                </table>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <a id="rest_register_btn" href="javascript:void(0)">提&nbsp;&nbsp;交</a>
                        </td>
                    </tr>
                </tfoot>

            </form>
            <a href="${pageContext.request.contextPath}/views/RequestBody.jsp">back</a>
        </body>
    </html>

自定义的插件库

$.fn.extend({
    serializeForm2JSON:function () {
            if(this.length>1){
                alert("你只能用ID选择器，选择唯一一个表单元素")
                return
            }
            var input = $(this[0]).serializeArray();
            var map={};
            input.forEach(function (item,index) {
                if (map[item.name]) {  //返回json中有该属性
                    if (!map[item.name].push) { //将已存在的属性值改成数组
                        map[item.name] = [map[item.name]];
                    }
                    map[item.name].push(item.value || ''); //将值存放到数组中
                }else {  //返回json中没有有该属性
                    map[item.name] = item.value || '';  //直接将属性和值放入返回json中
                }
            });
             return JSON.stringify(map);
    },
    imgShow:function (options) {
        $(this).change(function () {
            for (var i = 0; i < event.target.files.length; i++) {
                var file = event.target.files.item(i);
                if (!(/^image\/.*$/i.test(file.type))) {
                    continue; //不是图片 就跳出这一次循环
                }
                //实例化FileReader API
                var freader = new FileReader();
                freader.readAsDataURL(file);
                freader.onload = function (e) {
                    console.log(e.target.result);
                    $("#"+options.imageId).attr("src", e.target.result);
                }
            }
        })
    }
})

lbzheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Springboor RestController 基于 jsp 向后端上传文件

后台1 导依赖<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version></dependency...
复制链接

扫一扫