From表单ajax提交新增(含图片且图片回传)

Ruand~鳴

于 2022-06-19 21:33:24 发布

阅读量473

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/Ruyand/article/details/125362714

版权

本文介绍了一个使用Ajax进行表单提交的过程，包括前端HTML和JS代码的实现，利用layui、jQuery.form.min.js插件进行异步提交，并在成功后接收后台返回的图片地址，不进行页面跳转。在前端，通过FormData对象收集表单数据和图片文件，通过Ajax发送POST请求到后端Controller。在Controller层，实现了文件上传和数据插入的操作。

摘要由CSDN通过智能技术生成

一个新增一弄弄一天.

上传数据第一步首先导入文件上传依赖包：

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

     <version>2.11.0</version>

</dependency>

前端HTML代码：（我这段是新增form表单提交,内含图片上传）

<form id="cartes" enctype="multipart/form-data">
    <!—必须将表单的method设置为POST，并将enctype设置为multipart/form-data。只有在这样的情况下，浏览器才会把用户选择的文件以二进制数据发送给服务器。-->
    <div class="mo3">
        <div class="mo4">
            <input type="file" id="upPortrait" hidden name="cartePicture"><!--头像上传文本框-->
            <div class="">菜&emsp;图: &emsp;&emsp;
                <img src="" height="130px" id="userPicture" alt="头像">
            </div>
            <div>菜&emsp;名: &emsp;&emsp;<input name="dishName" type="text"></div>
            <div>菜单价: &emsp;&emsp;<input name="vegetablePrices" type="text"></div>
            <div>菜类型:&emsp;&emsp;
                <select name="carteType" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">素菜</option>
                    <option value="1">荤菜</option>
                    <option value="2">汤</option>
                    <option value="3">甜点</option>
                </select>
            </div>
            <div style="margin: 0 auto;">
                <button type="submit" class="xiugaian" lay-submit lay-filter="CarteSubmit">确定</button>
                <button type="reset" hidden>重置</button>
            </div>
        </div>
    </div>
</form>

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.form/4.3.0/jquery.form.min.js" type="application/javascript"></script>

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>