springmvc多文件上传并传参

一枝梅 2月前 ⋅ 80 阅读

springmvc多文件上传并传参

后端代码:

    @ApiOperation(value = "表单提交", notes = "")
    @PostMapping(value = "/submit")
    public Result<BssEnergizeCase> submit(
            @RequestParam(value = "wordFile") MultipartFile wordFile,
            @RequestParam(value = "imgFile") MultipartFile imgFile,
            @Validated RequestBodyExample requestBodyExample
    ) throws IOException {
        //业务代码
    }

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    
    
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .main {
            border-radius: 30px;
            width: 50%;
            margin: 0 auto;
            padding: 100px;
            margin-top: 200px;
            border: 1px solid #CCCCCC;
        }
    </style>
</head>
<body>
<div class="main">
    <form class="form-horizontal" role="form" id="submit" method="post" enctype="multipart/form-data"
          onsubmit="return false">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input name="name" type="text" class="form-control" id="name"
                       placeholder="请输入行业类别">
            </div>
        </div>
        <div class="form-group">
            <label for="hobby" class="col-sm-2 control-label">爱好</label>
            <div class="col-sm-10">
                <select id="hobby" name="hobby" class="form-control">
                    <option value="1">1 - 前端</option>
                    <option value="2">2 - 后端</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="summary" class="col-sm-2 control-label">自我介绍</label>
            <div class="col-sm-10">
                <textarea name="summary" style="height: 100px;" class="form-control" id="summary"
                          placeholder="文章内容概览,128字以内"></textarea>
            </div>
        </div>
        <div class="form-group">
            请选择头像照:
            <input type="file" id="imgFile" name="imgFile">
        </div>
        <div class="form-group">
            请选择简历:
            <input class="file" type="file" id="wordFile" name="wordFile">
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button onclick="checkForm()" type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</div>



    function checkForm() {
        var formData = new FormData($("#submit")[0]);
        $.ajax({
            headers: {
                "Authorization": "Bearer xxx"
            },
            url: "/submit",
            type: 'POST',
            data: formData,
            cache: false,
            async: false,
            processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
            contentType: false,  //必须false才会自动加上正确的Content-Type
            success: function (data) {
                alert("提交成功");
            },
            error: function (data) {
                alert("失败");
            }
        });
    }

</body>
</html>

参考:https://blog.csdn.net/qq_41669724/article/details/80748952


#java #文件上传
我有话说:

全部评论: 0

    文章目录