servlet富文本编辑器以及图片文件上传读取数据库操作

文章介绍了如何使用UEditor富文本编辑器,解决中文乱码问题并配置上传路径。在存储含有HTML标签的内容到数据库时,需注意SQL注入问题,可以通过替换双引号避免。另外,详细讲解了图片通过Ajax和FormData上传到服务器并存储到数据库的过程。
摘要由CSDN通过智能技术生成

一、富文本编辑器的使用

使用的是UEditor,下载后放到weContent下即可,导入后会报错,原因有是编码格式,修改成utf-8后,即可解决中文乱码的问题,更改文成之后还没有完成配置操作,还需要修改jsp文件夹下的config.json来进行地址的修改,这里的地址设置的,是有图片操作活着别的操作时,上传到的位置,具体下面的图片上传读取数据库也会用到。最简单的更改方式就是,将绝对地址改为相对地址。

UEditor网址如下:UEditor Docs

配置好后,即可按照需求,参考上表中建立富文本编辑器,读取设置富文本编辑器的值等等操作,完成想要的需求

需要注意的是,当我们想要将富文本编辑器的内容连带着格式一起存入数据库时,富文本编辑器传回的值就是包含着html标签的内容,然后存入数据库,当然存储他们数据库字段肯定需要设置为varchar类型,当我们企图在servlet中插入数据,SQL语句可能会因为HTML标签中的双引号导致异常。比如会出现

insert into content(sex,content) values(18,"<p><img src="2143124.img"></p>")

如同上述例子,插入数据时,HTML中不可避免的属性,会导致双引号冲突,所以我们需要在后端,将富文本编辑器返回的内容,梳理一下,比如:

content=content.replace("\"", "\'");

将content里面的双引号改为单引号,就不会出现双引号冲突导致SQL语句异常

二、图片上传读取数据库操作

主要的逻辑在于,将读取文件的input[type="file"]放在form中,利用 new FormData(),来获取存入图片的数据流,将这个流对象作为参数,ajax请求,文件操作存入某个位置,即可完成上传,完成后返回这个图片存入本地的名字,将该名字存入数据库,访问时调用即可

需要注意的是,new FormData()里的参数,是dom元素,如果使用jquery的话,记得将jdom转为dom

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值