SSM+Layui实现上传图片
2024-05-30 00:37:58
SSM + Layui 实现上传图片
前提准备
- SSM框架已经创建完成
第一步 ：在pom.xml文件中导入上传文件所需的依赖
<!-- 上传下载需要设计到的jar包 --><!-- https://mvnrepository.com/artifact/commons-io/commons-io --><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.6</version></dependency><!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.4</version></dependency>
第二步：修改配置文件 Springmvc.xml
<!--配置文件解析器对象--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="10485760"/></bean>
第三步：编写前端页面layuimini
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>上传头像</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all"><link rel="stylesheet" href="../../css/public.css" media="all"><style>.layui-form-item {width: auto;padding-right: 10px;line-height: 38px;}</style>
</head>
<body>
<div class="layuimini-container"><div class="layuimini-main"><form class="layui-form layuimini-form" ><div class="layui-form-item"><input type="hidden" name="images" class="image"><label class="layui-form-label ">上传头像:</label><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1"><p id="demoText"></p></div></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal" lay-submit lay-filter="addBtn">添加</button><button type="reset" class="layui-btn layui-btn-primary" ><i class="layui-icon layui-icon-refresh"></i>重置信息</button></div></div></form></div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>layui.use(['form','miniTab','jquery','upload'], function () {var form = layui.form,layer = layui.layer,miniTab = layui.miniTab,upload = layui.upload,$ = layui.jquery;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: '${pageContext.request.contextPath}/client/uploadFile' ,accept:'images',size:50000,before: function(obj){obj.preview(function(index, file, result){$('#demo1').attr('src', result);});},done: function(res){//如果上传失败if(res.code > 0){return layer.msg('上传失败');}//上传成功var demoText = $('#demoText');demoText.html('<span style="color: #4cae4c;">上传成功</span>');var fileupload = $(".image");fileupload.attr("value",res.data.src);console.log(fileupload.attr("value"));},error: function(){//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function(){uploadInst.upload();});}});});
</script>
</body>
</html>第四步 后台方法实现
//资源上传@ResponseBody@RequestMapping(value = "/uploadFile",produces = "application/json;charset=utf-8")public JSONObject upload(MultipartFile file,HttpServletRequest request){String prefix="";String dateStr="";//保存上传OutputStream out = null;InputStream fileInput=null;try{if(file!=null){String originalName = file.getOriginalFilename();prefix=originalName.substring(originalName.lastIndexOf(".")+1);Date date = new Date();String uuid = UUID.randomUUID()+"";SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");dateStr = simpleDateFormat.format(date);String filepath = "D:\\IdeaProjects\\ClientManage\\src\\main\\webapp\\images\\" + dateStr+"\\"+uuid+"." + prefix;File files=new File(filepath);//打印查看上传路径System.out.println(filepath);if(!files.getParentFile().exists()){files.getParentFile().mkdirs();}file.transferTo(files);JSONObject jo = new JSONObject();JSONObject jo2 = new JSONObject();jo.put("code",0);jo.put("msg","上传成功");jo2.put("src","images/"+ dateStr+"/"+uuid+"." + prefix);jo.put("data",jo2);System.out.println(jo);return jo;}}catch (Exception e){}finally{try {if(out!=null){out.close();}if(fileInput!=null){fileInput.close();}} catch (IOException e) {}}JSONObject jo = new JSONObject();jo .put("code",1);jo .put("msg","");return jo ;}
遇到的问题及解决方法
No converter for [class net.sf.json.JSONObject] with preset Content-Type 'null’
解决方法：在pom .xml文件中新增以下依赖
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.11.3</version></dependency><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.11.3</version></dependency><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.11.3</version></dependency>
SSM+Layui实现上传图片相关推荐
- 基于javaweb的酒店管理系统(java+ssm+layui+mysql)
基于javaweb的酒店管理系统(java+ssm+layui+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/myeclipse/st ...
- ssm+layui实现图片的上传与读取
ssm+layui实现图片的上传与读取 图片上传确实是一个项目比较核心的技术,我的项目并没有用到传统的富文本上传,而是将图片先热部署到tomcat,在上存储到数据库,读取的时候同样使用此方法. 图片上 ...
- Java项目:医院管理系统(java+SSM+layui+maven+mysql)
源码获取:博客首页 "资源" 里下载! 功能介绍: 基于ssm+layui框架的小型医院后台管理系统.简单实现了病人管理.病床管理.员工管理.部门管理.药品管理.仪器管理等基础功能 ...
- 基于javaweb的房屋租赁管理系统(java+ssm+layui+mysql+jsp)
基于javaweb的房屋租赁管理系统(java+ssm+layui+mysql+jsp) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/myecli ...
- 学生成绩管理系统 ssm layui
学生成绩管理系统 ssm layui 开发环境 开发软件 idea 也可以用eclipse导入 前端 lyaui 后端 spring springmvc mybatis 分页用的pagehelper ...
- 基于SSM+LayUI带兴趣推荐学生选课系统设计
开发软件:Eclipse,也可Idea 数据库:mysql 开发技术:SSM + LayUI 基于SSM的高校在线选课系统设计和实现中主要分为前端用户功能模块和后台管理员功能模块,其中前端用户分为学生 ...
- layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题 在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...
- 基于javaweb的问卷调查系统(java+ssm+layui+jsp+mysql)
基于javaweb的问卷调查系统(java+ssm+layui+jsp+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/myeclips ...
- SSM+LayUi实现的学籍管理系统(分为管理员、教师、学生三个角色，实现了专业管理，班级管理，学生管理，老师管理，课程管理，开课管理以及用户管理等)
博客目录 jsp+servlet+mysql实现的停车场管理系统 实现功能截图 系统功能 使用技术 完整源码 jsp+servlet+mysql实现的停车场管理系统 本系统是一个servlet原生框架 ...
最新文章
- Ubuntu18.04安装教程及SLAM常用软件安装教程
- Redis 4.0.X版本reshard出现错误的解决办法
- Linux内核——进程管理与调度
- python类型-python基础之五大标准数据类型
- webapi同时支持post和get报404错误
- 再谈poj2965（高效算法）
- 第6章：Kubernetes网络
- JS对文本框输入字符的限制
- 从零开始学前端：if判断，for循环,，switch判断 --- 今天你学习了吗？（JS：Day4）
- Financial Terminology - Shares, Stock, Equity,Security
- [详细功能介绍]Stimulsoft报表全线更新至2012.3
- 编译原理实验-PL0自底向上语法分析
- 模拟电路实验 05 - | 集成运算放大器
- Essay写作必须要保证质量吗?随便写能通过吗?
- 2022茶艺师（初级）操作证考试题库及在线模拟考试
- Springboot：整合DubboProvider的配置以及Comsumer的配置
- mysql中设置时区
- python文件的用法_关于.py文件的详细介绍
- BIOS 启动类型：Legacy+UEFI、UEFI BOOT、Legacy BOOT
- 竞拍秒购电商系统开发需求和功能架构分析