springmvc和layui富文本编辑器实时上传图片功能实现
本文将介绍 springmvc 上传功能实现,以及layui 前端插件的使用,尤其是其富文本编辑器的上传图片接口的实现。
一、开发准备
1、layui 官网:http://www.layui.com/
点击"立即下载"可以获取前端框架,没有使用过的朋友可以自行了解下。
下载好后,引入其核心 js 和 css 文件,可以测试是否按照成功。
2、layui 富文本编辑器文档:http://www.layui.com/doc/modules/layedit.html
3、几个必备的 依赖jar,用于上传和 json 数据返回
上传必备依赖
- <dependency>
- <groupId>commons-fileupload</groupId>
- <artifactId>commons-fileupload</artifactId>
- <version>1.2.2</version>
- </dependency>
- <dependency>
- <groupId>commons-io</groupId>
- <artifactId>commons-io</artifactId>
- <version>2.4</version>
- </dependency>
json 依赖
- <dependency>
- <groupId>org.json</groupId>
- <artifactId>json</artifactId>
- <version>20170516</version>
- </dependency>
二、layui 代码部署
1、layui 完整的文件
那几个 js 文件 ,只需要引入 layui.all.js 即可,之前要引入 jQuery库
2、引入 核心 css 和 js 文件
css
- <link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/layer/css/layui.css">
js
- <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
- <script src="${pageContext.request.contextPath}/plugin/layer/layui.all.js"></script>
- <script>
- //JavaScript代码区域
- layui.use('element', function(){
- var element = layui.element;
- });
- </script>
3、实现一个编辑器
代码可以从 layui 官网导航上的 "文档"-->"表单"获取
地址:http://www.layui.com/demo/form.html
我们拷贝一段代码
- <form class="layui-form" method="post" id="myForm" enctype="multipart/form-data">
- <div class="layui-form-item layui-form-text">
- <label class="layui-form-label">内容</label>
- <div class="layui-input-block">
- <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="content"></textarea>
- </div>
- </div>
- </form>
注意:form表单的class需要加上 layui-form
textarea 标签的 name 和 id,要和下面一致
然后在 其后加上 js 文件创建一个 编辑器和让图片按钮能发送数据
- <script>
- layui.use(['form', 'layedit', 'laydate'], function() {
- var form = layui.form
- , layer = layui.layer
- , layedit = layui.layedit
- , laydate = layui.laydate;
- //上传图片,必须放在 创建一个编辑器前面
- layedit.set({
- uploadImage: {
- url: '${pageContext.request.contextPath}/uploadFile' //接口url
- ,type: 'post' //默认post
- }
- });
- //创建一个编辑器
- var editIndex = layedit.build('content',{
- height:400
- }
- );
- });
- </script>
注意:上传图片的代码必须放在 创建一个编辑器 前面
具体文档:http://www.layui.com/doc/modules/layedit.html
4、这个时候,应该可以看到一个 富文本编辑框了
这个编辑框的高度不知为什么设置无效,暂时不管了。
三、springmvc 实现上传功能
1、加入基本的 依赖
前面已经说了,上传需要两个 jar,另外我们需要返回 Json 数据,也需要一个 Json 的jar
2、spirngmvc.xml 配置文件上传
- <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
- <!--设置上传最大尺寸为5MB-->
- <property name="maxUploadSizePerFile" value="5242880"/>
- <property name="defaultEncoding" value="UTF-8"/>
- <property name="resolveLazily" value="true"/>
- </bean>
如果你发现,无法获得上传的文件,通常是没有添加此处代码
3、新建一个上传文件的控制器
- package com.liuyanzhao.blog.controller.common;
- import org.apache.ibatis.annotations.Param;
- import org.json.JSONObject;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.ResponseBody;
- import org.springframework.web.multipart.MultipartFile;
- import javax.servlet.http.HttpServletRequest;
- import java.io.File;
- import java.io.IOException;
- import java.text.SimpleDateFormat;
- import java.util.Calendar;
- import java.util.Date;
- import java.util.HashMap;
- import java.util.Map;
- @Controller
- public class UploadFileController {
- //上传文件
- @ResponseBody
- @RequestMapping(value = "/uploadFile")
- public String uploadFile(HttpServletRequest request,@Param("file") MultipartFile file) throws IOException {
- SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
- String res = sdf.format(new Date());
- //服务器上使用
- // String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
- //本地使用
- String rootPath ="/Users/liuyanzhao/Documents/uploads/";
- //原始名称
- String originalFilename = file.getOriginalFilename();
- //新的文件名称
- String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
- //创建年月文件夹
- Calendar date = Calendar.getInstance();
- File dateDirs = new File(date.get(Calendar.YEAR)
- + File.separator + (date.get(Calendar.MONTH)+1));
- //新文件
- File newFile = new File(rootPath+File.separator+dateDirs+File.separator+newFileName);
- //判断目标文件所在的目录是否存在
- if(!newFile.getParentFile().exists()) {
- //如果目标文件所在的目录不存在,则创建父目录
- newFile.getParentFile().mkdirs();
- }
- System.out.println(newFile);
- //将内存中的数据写入磁盘
- file.transferTo(newFile);
- //完整的url
- String fileUrl = "/uploads/"+date.get(Calendar.YEAR)+ "/"+(date.get(Calendar.MONTH)+1)+ "/"+ newFileName;
- Map<String,Object> map = new HashMap<String,Object>();
- Map<String,Object> map2 = new HashMap<String,Object>();
- map.put("code",0);//0表示成功,1失败
- map.put("msg","上传成功");//提示消息
- map.put("data",map2);
- map2.put("src",fileUrl);//图片url
- map2.put("title",newFileName);//图片名称,这个会显示在输入框里
- String result = new JSONObject(map).toString();
- return result;
- }
- }
注意:
① 博主这里文件是上传到本地的 /Users/liuyanzhao/Documents/uploads/ 目录,大家自行修改。待会儿还要在 Tomcat 或者 IDE 里配置静态资源虚拟映射(即55行的路径,/uploads ),才能在浏览器里访问图片
② 图片上传,以 年/月/文件名 形式储存,其中文件名是按时间自动命名
③ 第 55 行的是图片的 url,/ 表示根目录,会自动加上 域名的,大家可根据自己情况修改
④ 第 59-66 行代码是生产 以 Map 方式 创建JSON,最终返回给 前台
这里的 JSON,layui 是有要求的,如图
创建 JSON 的方法很多,这里不介绍了,记得 JSON 区分大小写,不支持注释 即可
关于 JSON 的大家可以百度或者上慕课网找教程
⑤ 这个方法的路径映射是 /uploadFile 要和 我们上面配置的 接口 url 一致,否则无法上传
四、静态资源虚拟路径配置
这里介绍两种方法。
1、Tomcat 的server.xml 里配置
如果使用IDE如IntellJ IDEA运行Tomcat,无效。如果是部署到服务器上,可以使用
打开 Tomcat 安装目录 下的 conf/server.xml
在 Host 标签里添加一行 context 配置即可,如下
- <Host name="localhost" appBase="webapps"
- unpackWARs="true" autoDeploy="true">
- <!-- SingleSignOn valve, share authentication between web applications
- Documentation at: /docs/config/valve.html -->
- <!--
- <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
- -->
- <!-- Access log processes all example.
- Documentation at: /docs/config/valve.html
- Note: The pattern used is equivalent to using pattern="common" -->
- <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
- prefix="localhost_access_log." suffix=".txt"
- pattern="%h %l %u %t "%r" %s %b" />
- <!-- 增加的静态资源映射配置 -->
- <Context path="/uploads" docBase="/Users/liuyanzhao/Documents/uploads" reloadable="true" crossContext="true"></Context>
- </Host>
注意:
path 是服务器上的虚拟路径
docBase 是你的本地物理路径
比如,我在本地测试,项目地址(相当于域名)是 http://localhost:8090/Blog
我要访问 /Users/liuyanzhao/Documents/uploads/2017/9/hello.png 这张图片,在浏览器上只需要输入
http://localhost:8090/Blog/uploads/2017/9/hello.png 就能访问
2、在IDE 里配置
因为我们通常是用 IDE 来运行 Tomcat,似乎这时候 本地Tomcat 安装目录的 配置不生效,暂时不追究
具体方法如下,因为博主用的是 IntelliJ IDEA,这里介绍IDEA 如果配置静态资源映射
(1) 点击右上角的Tomcat 配置
(2)点击 Deployment,点击下面的 加号 ,添加一条映射
因为我的项目文件夹的映射是 /Blog ,所以这里前面也加了/Blog,大家可根据自己情况填写
五、效果如下
本文地址:https://liuyanzhao.com/6223.html
springmvc和layui富文本编辑器实时上传图片功能实现相关推荐
- vue-quill-editor富文本编辑器自定义上传图片功能
问题描述:vue-quill-editor富文本默认上传图片是将图片转换成base64进行存储,字段过长:然后进行自定义上传图片,只保存图片路径,减少服务器压力 解决思路: 1.先创建一个上传图片的组 ...
- layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- LayUI - 富文本编辑器
一个做后端的猿,难免用到LayUI,首先在这里,不推荐使用,坑多 一.富文本编辑器 缺点:功能太少,只能满足简单需求,只有下面这几个功能 废话少说,直接丢代码 html部分 <link rel= ...
- layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- layui富文本编辑器上传图片
layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊. 首先准备工作 ...
- kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下 富文本编辑器上传图片 一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...
- vue-quill-editor 富文本编辑器 自定义上传图片
① 安装插件,以及引入插件 使用命令:npm install vue-quill-editor -S ② main.js 中引入 // 导入富文本编辑器 import VueQuillEditor f ...
- vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
- layui富文本编辑器(layedit)的使用
效果图: 1.html页面 使用文本域标签承载富文本编辑器<textarea></textarea><div class="layui-form-item&qu ...
- Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...
最新文章
- Linux Shell常用技巧(三) sed
- postgres 支持的线程数_为什么 Java 坚持多线程不选择协程?
- C++的类和C里面的struct有什么区别
- Oracle杀死Java EE:名正言顺转到.NET Core
- html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中
- php mysql 绕过_PHP中md5绕过
- linux aio拷贝文件,Linux通过AIO进行异步读文件
- IT草根的江湖之路之五:鉴于现实,屈服!
- C#拾遗系列(5):泛型委托
- python docx 表格打印不显示_python-docx 设置 word 文档中表格格式
- typora中文版官方免费快速下载以及Markdown的一些常用语法、Java知识点
- Docker入门学习四之自己制作Docker镜像
- 中断(二)—— x86 APIC
- 高淇Struts2.0教程之视频笔记(4)
- 一台计算机安装了fortran语言,win10系统fortran怎么安装_win10系统fortran安装教程
- python识别cad图纸_手把手教你广联达软件如何识别天正CAD图纸
- 人工智能新闻写作软件3.0时代来临
- CAD学习笔记中级课【坐标】
- 蓝桥幼儿园(蓝桥杯)
- Kubernetes CSI 介绍及使用