layui结合springboot上传图片

在这里插入图片描述

大家好,我是雄雄,欢迎关注公众号**【雄雄的小课堂】**。

最近实在是忙的抽不开身,并且身上也出现了一堆的毛病,今天牙疼,明天脊椎疼,然后接着又头疼……年纪轻轻的,咋这么多毛病呢?我也在坚持锻炼呢……

layui结合springboot上传图片

今天给大家分享的是如何利用layui实现图片(文件)上传呢?

Layui是一款前端ui框架,这个框架最大的特点就是简单易学,我记得第一次用它的时候还在上学,就下载下来试了试,发现是真好用啊!

Layui里面所包含的组件,官方都已提供了代码示例,包括我今天所分享的上传文件以及图片,下面是上传图片的前端源代码:

 <script>//文件上传layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: '/uploadFile' //改成您自己的上传接口,before: function(obj){//预读本地文件示例,不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接(base64)});},done: function(res){//如果上传失败if(res.code > 0){layer.msg('上传失败');}//上传成功layer.msg('上传成功');//将图片的名字放在表单中,添加的时候得放在数据库里面$(function(){$("#fileName").val(res.msg);//alert('赋值成功');})},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>	

效果如图所示:

在这里插入图片描述

点击“商品图片”,可在本地选择图片进行上传,效果如下:

在这里插入图片描述

点击立即提交即可连同表单内容一并插入至数据库中。

前端就是直接拷贝官方代码即可,需要注意的是layui的版本,一定要用最新版本,我用的是V2.5.7,第一次用的比这个版本小,是V2.1.5,就不可以。

前端好实现,不好实现的是后端,我们接下来看看控制器中是如何进行操作的。

//图片上传@ResponseBody@RequestMapping("/uploadFile")public JSON uploadFile(MultipartFile file, HttpServletRequest request) {JSONObject json = new JSONObject();//路径String filePath = System.getProperty("user.dir") + "/src/main/resources/static/images/";//上传到这个文件夹File file1 = new File(filePath);//如果没有的话创建一个if (!file1.exists()) {file1.mkdirs();}//路径+文件名//文件名:file.getOriginalFilename()String finalFilePath = filePath + file.getOriginalFilename().trim();File desFile = new File(finalFilePath);if (desFile.exists()) {desFile.delete();}try {file.transferTo(desFile);json.put("code", 0);//将文件名放在msg中,前台提交表单时需要用到json.put("msg", file.getOriginalFilename().trim());JSONObject json2 = new JSONObject();json2.put("src", finalFilePath);json2.put("title", "");json.put("Data", json2);} catch (Exception e) {System.out.println(e.getMessage());json.put("code", 1);}System.out.println(json);return json;}

相关代码都进行了注释,然后就可以啦。

用到的json包是import com.alibaba.fastjson.JSON;在maven中可以添加如下依赖:

   <!--json依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.75</version></dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.75</version></dependency>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码

前言 什么是Xamarin? Xamarin始创于2011年&#xff0c;旨在使移动开发变得难以置信地迅捷和简单。 Xamarin的产品简化了针对多种平台的应用开发&#xff0c;包括iOS、Android、Windows Phone和Mac App。 Xamarin由许多著名的开源社区开发者创立和参与&#xff0c;而且也是…

Java不需要使用Javafx的Application也能将Node导出图片

一、Java通用导出Javafx Chart图片 Javafx不需要使用Application也能导出图片&#xff0c;使用PlatformImpl.startup方法初始化Javafx的Toolkit。 Javafx API并不是所有机器都支持的&#xff0c;Node导出图片不一定成功。&#xff08;如&#xff1a;无法初始化Javafx的Toolki…

layui上传图片,前端直接拷代码,后端……

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近实在是忙的抽不开身&#xff0c;并且身上也出现了一堆的毛病&#xff0c;今天牙疼&#xff0c;明天脊椎疼&#xff0c;然后接着又头疼……年纪轻轻的&#xff0c;咋这么多毛病呢&#xff1f;我也在…

ASP.NET Core 源码学习之 Options[3]:IOptionsSnapshot

2017-06-28 更新&#xff1a;OptionsSnapshot 已改为 OptionsManager 变更详情IOptionsCache 已改为 IOptionsMonitorCache 变更详情 在 上一章 中&#xff0c;介绍了 IOptions 的使用&#xff0c; 而我们知道&#xff0c;在 ConfigurationBuilder 的 AddJsonFile 中&#xff0…

layui结合ajax实现下拉联动效果

大家好好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号&#xff1a;雄雄的小课堂。 昨天分享的是使用layui集合springboot实现图片上传&#xff0c;文章地址在这里&#xff0c;需要的小伙伴们可以去看看&#xff1a; 今天给大家分享的内容也是那天在造项目的时候完成的&am…

ASP.NET Core MVC – Caching Tag Helpers

简介 缓存可以大大提高应用程序加载时间和响应速度。我们可以使用缓存Tag Helpers缓存不会频繁更改的HTML内容。 在上一篇文章ASP.NET Core MVC Tag Helpers 介绍中&#xff0c;我们谈到了Tag Helpers&#xff0c;演示Tag Helpers能做什么、如何使用它们以及一些最常用的Tag …

layui结合ajax实现下拉菜单联动效果

大家好好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号&#xff1a;雄雄的小课堂。昨天分享的是使用layui集合springboot实现图片上传&#xff0c;文章地址在这里&#xff0c;需要的小伙伴们可以去看看&#xff1a;今天给大家分享的内容也是那天在造项目的时候完成的&#x…

ASP.NET Core 源码学习之 Options[4]:IOptionsMonitor

前面我们讲到 IOptions 和 IOptionsSnapshot&#xff0c;他们两个最大的区别便是前者注册的是单例模式&#xff0c;后者注册的是 Scope 模式。而 IOptionsMonitor 则要求配置源必须是可监听的&#xff0c;用来实现 Options 实例的自动更新&#xff0c;并对外提供了 OnChage 事件…

Layui hint: Table element property lay-data configuration item has a syntax error解决方式

今天在使用layui的数据表格时&#xff0c;报错Layui hint: Table element property lay-data configuration item has a syntax error&#xff0c;找了好几中解决方式&#xff0c;网上说的用{}括起来。 对于我来说都不适应哎&#xff0c;我发现我的问题比较低级。 源代码&…

ASP.NET Core MVC – Form Tag Helpers

简介 我们已经介绍过Tag Helpers以及一些最常用的Tag Helpers&#xff0c;也谈到了缓存Tag Helpers。在这篇文章中&#xff0c;我们将讨论表单Tag Helpers。 HTML或Web表单通过使用各种HTML元素用于收集来自用户的输入&#xff0c;如输入框、复选框、单选按钮、下拉列表等。使…

表单提交报错405的解决方式

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号&#xff1a;雄雄的小课堂。今天&#xff0c;分享一个bug的解决的方法&#xff0c;到最后解决了也不知道为啥这样是可以的&#xff0c;原来的方法是不可以的……01问题描述项目中有这样的一个需求&#xff0c;就是在原来的…

JavaFX图表(二)之饼图

翻译自 JavaFX - 饼图 饼图是将值表示为具有不同颜色的圆的切片。标记这些切片&#xff0c;并且在图表中表示与每个切片对应的值。 以下是一张饼图&#xff0c;描绘了一个实例中各公司的移动销售情况。 在JavaFX中&#xff0c;饼图由名为PieChart的类表示。该类属于包javaf…

RabbitMQ(mall项目学习 死信、延迟队列)

文章目录RabbitMQ的死信队列RabbitMQ的延迟队列mall项目 业务场景说明Rabbitmq 插件实现延迟队列启动&#xff08; UI 界面 &#xff09;RabbitMQ的死信队列 TTL&#xff1a;time to live 消息存活时间 如果消息在存活时间内未被消费&#xff0c;则会被清除 RabbitMQ⽀持两种…

asp.net中条件查询+分页

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号&#xff1a;雄雄的小课堂。 今天&#xff0c;分享的是asp.net中条件查询分页的小案例。 如下图所示&#xff1a; 各个功能模块均已标注&#xff0c;先大致介绍一下业务。 \1. 点击左侧图书类别&#xff0c;根绝类别编…

.NET Standard@Xamarin.Forms

编者语 &#xff1a; .NET技术社群由于微软的开源和跨平台性越来越受关注&#xff0c;但国内都是碍于大家以往的认识阻碍了发展&#xff0c;没有太多大的企业敢于去把.NET作为第一生产力。你作为.NET程序员有义务去保护好你的饭碗&#xff0c;也要改变人对.NET的认知。希望大家…

JavaFX图表(一)

翻译自 JavaFX - 图表 通常&#xff0c;图表是数据的图形表示。有各种各样的图表来表示数据&#xff0c;如条形图&#xff0c;饼图&#xff0c;折线图&#xff0c;散点图等。 JavaFX支持各种饼图和XY图表。在XY平面上表示的图表包括AreaChart&#xff0c;BarChart&#xff0…

我们在进行着一场拔河比赛……

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。不知不觉&#xff0c;3班已经面临就业了。似乎每个班级到三期的最后阶段&#xff0c;出现的问题都那么类似&#xff0c;那就是一部分同学已经“放弃努力”了&#xff0c;大家貌似在等着最后的就业&…

JavaFX图表(三)之折线图

翻译自 JavaFX - 折线图 折线图或折线图将信息显示为由直线段连接的一系列数据点&#xff08;标记&#xff09;。折线图显示数据如何以相等的时间频率变化。 以下是描绘不同年份学校数量的折线图。 在JavaFX中&#xff0c;折线图由名为LineChart的类表示。该类属于包javafx…

释放.NET Big Memory和内存映射文件的能量

要点&#xff1a; 通常Web服务器具有的内存远远超过了.NET GC在正常情况下可以有效处理的量。缓存服务器的性能优势通常会因增加了网络成本而下降。内存映射文件通常是在系统重新启动后填充缓存的最快方式。服务器端调优的目的是出站网络连接达到饱和的程度。 通过最小化CPU、…

3班的第二次模拟面试

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。今天&#xff0c;三班进行了第二次模拟面试&#xff0c;还是和第一次一样&#xff0c;分为技术面试和人事面试&#xff0c;不过这次不一样的一点就是我亲自面的大部分开发学生。通过这次模拟面试&#…