Ajax使用formData实现上传最多3张图片和对象

最新推荐文章于 2024-08-14 00:13:39 发布

*Extraordinary

最新推荐文章于 2024-08-14 00:13:39 发布

阅读量822

点赞数

文章标签： java ajax

本文链接：https://blog.csdn.net/weixin_43849269/article/details/104510237

版权

本文展示了如何使用Ajax和formData实现最多上传3张图片的功能，图片保存在uploads目录下，第三张图片的路径存储在数据库。同时，代码涵盖了前端页面、HTML、JS上传逻辑以及后台Java Controller的处理方法。注意，前两幅图片的路径没有处理。

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

话不多说，直接上代码：
1.前端页面效果图
在这里插入图片描述 2.页面html代码

<form id="newsForm" name="newsForm" action="" method="post">
            <table>
                <tr>*标题：</tr>
                <span id="spanTitle"></span><br/>
                <tr><input type="text" id="inputTitle" name="news_title" placeholder="请填写新闻标题（必填）" onblur="checkTitle()"/></tr>
                <br/>
                <tr>*内容：</tr>
                <span id="spanContent"></span><br/>
                <tr>
                    <textarea id="inputContent" name="news_content" placeholder="请填写新闻内容（必填）" onblur="checkContent()"></textarea>
                </tr>
                <br/>
                <tr>*配图：</tr>
                <br/>
                <input type="file" name="files" multiple="multiple" accept="image/jpeg , image/jpg , image/png"
                       onchange="viewImage(this)"/><br/><br/>
                <tr>*图片预览：</tr>
                <div style="height:160px;">
                    <img src="" class="preview"/>
                    <img src