ueditor上传图片写入数据库_ueditor图片上传,以及图片路径保存进数据库
前段时间一直忙于各种事,今天有点空也不是很困,就来写写文章吧,写的东西如题
那么我就按顺序进行说明一下吧
先废话一句吧,什么ueditor?
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点
那好,我们就来使用一下它
一:首先我们到官网下载ueditor(网址:http://ueditor.baidu.com/website/download.html),我这里使用java写的,所以选择jsp版本的进行下载,然后解压
下载:
解压:
然后我喜欢重命名为ueditor,因为这名字太长,我引入的时候写起麻烦,然后将这个文件夹拷贝到项目中去,我用的myeclipse,所以我直接拷贝到WebRoot中
然后我们在jsp页面引入它,进行使用
然后我们开始使用并且定制我们要的功能
var ue = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'autotypeset', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|',
'simpleupload', 'emotion', 'scrawl', 'insertvideo', 'attachment', '|',
'spechars', '|',
'inserttable', 'deletetable', 'charts', '|',
'print', 'preview', 'searchreplace',]
],
autoHeightEnabled: true,
autoFloatEnabled: true
});
定制的功能具体参照官方文档,这里只是我个人定制的
二:配置ueditor的配置文件,这样图片上传功能才能实现
我们打开如下文件
配置其中的图片访问路径前缀和图片的保存路径
图片访问前缀就是图片访问的地址去掉图片名称的部分,比如我配置的是:http://127.0.0.1:8080/项目名称
然后图片保存路径我配置的是 : /upload/image/{yyyy}{mm}{dd}/{time}{rand:6}
这样图片上传功能就实现了,当然后台要做些处理,比如前台的数据发送到后台,后台保存,并且前台调用后台数据显示
但是这样我可能把图片和内容混在一起保存,如果我想单独提取内容里面的图片该怎么办
三,使用正则表达式提取内容里的图片路径
首先我后台获取前台提交过来的ueditor中的内容,然后我用正则表达式获取内容里所有图片的地址,先看一下我的正则表达式工具类吧,这个我觉得写的不错,是网上搜集的一个
ImgUtil.java
package com.test.util;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class ImgUtil {
/**
* 从HTML源码中提取图片路径,最后以一个 String 类型的 List 返回,如果不包含任何图片,则返回一个 size=0 的List
* 需要注意的是,此方法只会提取以下格式的图片:.jpg|.bmp|.eps|.gif|.mif|.miff|.png|.tif|.tiff|.svg|.wmf|.jpe|.jpeg|.dib|.ico|.tga|.cut|.pic
* @param htmlCode HTML源码
* @return 标签 src 属性指向的图片地址的List集合
* @author Carl He
*/
public static List getImageSrc(String htmlCode) {
List imageSrcList = new ArrayList();
Pattern p = Pattern.compile("]*\\bsrc\\b\\s*=\\s*('|\")?([^'\"\n\r\f>]+(\\.jpg|\\.bmp|\\.eps|\\.gif|\\.mif|\\.miff|\\.png|\\.tif|\\.tiff|\\.svg|\\.wmf|\\.jpe|\\.jpeg|\\.dib|\\.ico|\\.tga|\\.cut|\\.pic)\\b)[^>]*>", Pattern.CASE_INSENSITIVE);
Matcher m = p.matcher(htmlCode);
String quote = null;
String src = null;
while (m.find()) {
quote = m.group(1);
src = (quote == null || quote.trim().length() == 0) ? m.group(2).split("\\s+")[0] : m.group(2);
imageSrcList.add(src);
}
return imageSrcList;
}
}然后借助这个工具类进行正则匹配,但是内容中可能包含多张图片,所以我获取的肯定是一个list,但是我用的关系型数据库mysql,不能直接插入list,所以我只能将list转成
字符串插入,所以这里借助另一个工具类,完成list转成字符串,这里使用StringBuilder不用String是因为String是不可变的,自己下去查查
StringUtil.java
package com.test.util;
import java.util.List;
public class StringUtil {
public static String listToString(List list, char separator){
StringBuilder sb = new StringBuilder();
for(int i=0; i
sb.append(list.get(i)).append(separator);
}
return sb.toString().substring(0,sb.toString().length()-1);
}
}
然后控制器action或者servlet中这样写
List list = ImgUtil.getImageSrc(request.getParameter("content"));
String picturePath = StringUtil.listToString(list, ',');
这样就可以插入地址到数据了,当然数据库picturePath字段是String类型的,要设长一点,用varchar,否则可能不够用,当我们需要用图片时,再把字符串取出来同理
转成list,然后进行相应的显示使用就可以了
如果有什么不清楚的可以给我留言,或者互相交流,非常欢迎交流反馈
ueditor上传图片写入数据库_ueditor图片上传,以及图片路径保存进数据库相关推荐
- php复制mysql文件路径_与php 有关的问题 如何将上传的文件路径 保存到数据库中...
就是不知道为什么插入不进去求指点最好是给改改谢谢新手见笑了<?phpinclude ("lianjie.php");if(is_uploaded_file($_FILES[' ...
- webuploader结合php实现图片上传到本地和保存数据库
webuploader结合php实现图片上传到本地和保存数据库,核心功能是以下三点: 一.上传前图片预览 二.上传图片到本地文件夹 三.上传图片路径和图片对应的设备编号到mysql数据库 Webupl ...
- php 怎么上传图片,php怎么把图片上传到图片服务器
php怎么把图片上传到图片服务器? 图片服务器代码<?php /** * 图片服务器上传API接口 * by Zx * date 2016-04-28 */ header('Content-ty ...
- 菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析 说明 一.图片路径分析 二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结 四.更新配置文件 说明 更新时间:202 ...
- java分布式实现图片上传到图片服务器
java分布式实现图片上传到图片服务器 操作步骤 第一步 第二步 第三步 第四步 第五步 第六步 代码实现 第七步 JS代码 大功告成!! 操作步骤 第一步 在页面中的form表单里面增加一个inpu ...
- java 图片服务器 上传_Java实现把图片上传到图片服务器(nginx+vsftp)
前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...
- 通过url链接将图片上传oss图片显示不完整问题
通过url链接将图片上传oss图片显示不完整问题 问题:在之前通过链接上传图片的时候,都是先获取inputStream流,然后通过available()方法获取文件大小.但是通过这种方法获取到的文件大 ...
- vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小 可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件 其实这儿所说的压缩,就是图片重 ...
- python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传 上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...
- springboot实现图片上传和图片删除
图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...
最新文章
- 华为公有云架构解决方案
- Vue中动态设置页面title
- linux c select 服务器源码 简介
- VS调试查看寄存器学习总结
- android中关于手机屏幕的相关操作(获取屏幕的宽高等操作)
- python 程序运行在阿里云主机_阿里云主机Access key利用工具
- java皮肤_java程序的皮肤效果实现代码
- HPE 发布严重的 RCE 0day 漏洞,影响服务器管理软件 SIM,无补丁
- ThinkpadT470接通电源开机显示电量0%充不进电且电源指示灯不亮的解决办法
- 检测洛达芯片的软件_购买华强北洛达1562a的10条须知!!!快来看!!!
- 书单|互联网企业面试案头书之架构师篇
- 【大数据部落】IBM SPSS Modeler通过数据挖掘我们能从股市数据得到什么
- css控制广告位置,CSS固定定位实现右下角可关闭广告
- word利用宏批量调整图片大小
- 【渝粤题库】陕西师范大学209020 史记研究 作业(专升本)
- 《Python数据分析与应用》第7章 机器学习模型的应用 实训部分
- Ubuntu20.04安装fcitx中文输入法(五笔拼音)
- 加州大学欧文分校 计算机专业,加州大学欧文分校计算机工程专业怎么样?
- 年薪40万最牛应届生 南大一出5个其中2个同宿舍
- python微博爬虫实战_32个Python爬虫实战项目,满足你的项目荒,附赠资料
热门文章
- Clair介绍和源码分析
- 快速使用CSS 弹性盒子
- 老猿学5G扫盲贴:3GPP中的5G计费架构
- 编写高效的JavaScript程序
- pb调用精伦电子sdtapi.dll读卡函数的心得
- 金蝶打印不要数量单价_金蝶软件如何处理打印凭证没有显示单位、数量和单价...
- 计算机基础讨论,对计算机的基础概念讨论
- [含文档+PPT+源码等]精品基于Uniapp+SSM实现的安卓的掌上校园系统[包运行成功]计算机毕业设计Android项目源码
- 自媒体新手入门攻略,学习干货内容了解运营技巧
- linux nohup命令启动程序,关闭shell,程序依然会关闭