springboot项目实现图片的选择、取消选择、上传功能

最新推荐文章于 2023-06-20 12:29:19 发布

qq_39896032

最新推荐文章于 2023-06-20 12:29:19 发布

阅读量452

点赞数

分类专栏：功能点文章标签： java javascript html

本文链接：https://blog.csdn.net/qq_39896032/article/details/109486462

版权

本文记录了在SpringBoot项目中实现图片选择、预览、取消选择及上传至数据库的详细步骤，包括JavaScript的前端交互逻辑和Java后端的数据库操作。通过前端HTML设置、JS的图片大小判断和预览功能，以及后端Controller接收和存储图片。

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

写项目的过程中遇到一个上传图片的功能，之前做过一次，但是没有记牢，这次做好索性记录一下！

页面html的设置
js实现图片大小判断、图片预览、取消选择以及将数据传给后台
java实现图片上传至数据库

一、页面html的设置

1、显示图片预览标签img_show
2、选择图片按钮标签img_input
3、取消选择按钮标签del_img

<div id="img_show"><img src="http://localhost:8080/static/images/headImg.png" class="setImgArea img-circle " /></div>
<div id="img_btn"> 
    <span>上传图片</span> 
    <input id="img_input" name="uploadFile" type="file" accept="image/*" onchange="checkImg()"/>  
	<input id="del_img" type="button" onclick="delImg()" value="取消选择">
</div>

因为项目还未完成，还没实现图片按照数据库存在的在前端的显示，所以默认都为一张原始图片，如果实现按照数据库的显示，可以在js获取改图片名，然后修改img的src

二、JavaScript实现图片大小判断、图片的选择预览、取消选择以及将数据传给后台

1、图片选择时判断图片的大小，符合要求则调用图片预览功能，其中http://localhost:8080/static/images/headImg.png"是一张原始图片的链接

/**
 * 防止文件为空或体积过大
 * @returns
 */
function checkImg(){
   
    var fileName=$("#img_input").val()
    fileName=fileName.replace("","")
    var flag=true

    var size = $("#img_input")[0].files[0].size
    if(size/1000>1000){
   
        flag=false
        alert("图片大小不能超过1000KB")
    }
    if(flag){
   
        showLoadImg();//调用图片显示函数
    }
    else{
   
        $("#img_show"