Java学习笔记-Day59 文件上传、富文本编辑器

最新推荐文章于 2024-03-31 00:09:42 发布

金海湖底有宝藏

最新推荐文章于 2024-03-31 00:09:42 发布

阅读量189

点赞数

分类专栏：笔记文章标签： java

本文链接：https://blog.csdn.net/qq_42141141/article/details/111999663

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

Java学习笔记-Day59 文件上传、富文本编辑器

一、文件上传
- 1、简介
- 2、实现步骤
二、富文本编辑器
- 1、简介
- 2、ueditor

一、文件上传

1、简介

在 Servlet3.0 以前的版本没有对文件上传进行支持，只能用第三方组件实现。例如 commons.jar 和 commns-io.jar 两个jar包一起使用。

在 Servlet3.0 中对文件上传进行了支持，核心接口是Part接口（Post请求、流的操作），该接口中的核心方法如下：

方法声明	方法描述
void delete()	删除part对象对应文件项的基本存储，包括删除任何相关的临时磁盘文件。
String getContentType()	请求上传文件的类型。
String getHeader(String name)	获取上传文件内容的指定名字的请求头信息。
Collection getHeaderNames()	获取上传文件请求的全部请求头名称，返回的是一个包含请求头名称的集合。
Collection getHeaders(String name)	通过请求头名称，获取全部对应的请求信息，返回的是一个集合。
InputStream getInputStream()	获取输入流。
String getName()	获取控件的名字。
Long getSize()	获取上传文件的大小。
void write(String fileName)	将文件写入到物理磁盘。

在Servlet3.0版本中，请求接口提供了获取Part实例的方法：

方法声明	方法描述
Part getPart(String name)	根据上传控件名称获取上传文件对应的Part对象。
Collection getParts()	获取所有上传文件对应的Part对象。

2、实现步骤

（1）在网页文件（html、jsp）的表单form中，添加编码类型的属性enctype。

	<!-- 文件上传：1、form添加设置编码类型的enctype属性 -->
	<form action="BlogServlet.do" method="post" enctype="multipart/form-data">
		<input type="file" name="myfile">
		<input type="submit" value="提交">
	</form>

enctype（encodetype）是编码类型。multipart/form-data 是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据。在默认情况下，enctype 的值是 application/x-www-form-urlencoded，不能用于文件上传，只有使用 multipart/form-data，才能完整的传递文件数据。

（2）在 Servlet 中添加注解 @MultipartConfig，使 Servlet 支持文件上传。

	@WebServlet(urlPatterns = "/BlogServlet.do")
	@MultipartConfig //文件上传：2、添加@MultipartConfig注解，支持文件上传
	public class BlogServlet extends HttpServlet {}

（3）从文件域获取上传的文件。

	//文件上传：3、获取上传文件
	Part part = request.getPart("myfile");

（4）将文件写入目标位置。

	// 文件上传：4、将文件写入目标位置(tomcat中的webapps下的picture目录)
	// 获取实际路径
	String path = request.getServletContext().getRealPath("/picture/");
	// 获取文件名
	String picpath = path+part.getSubmittedFileName();
	// 将文件写入目标位置
	part.write(picpath);

注意：在数据库只存储图片的路径，图片可以存储在Tomcat目录 - >webapps -> 当前部署的工程目录 -> picture。

二、富文本编辑器

1、简介

富文本编辑器（Rich Text Editor），简称 RTE，是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 并需要设置各种文本格式的用户所喜爱。
在这里插入图片描述

① wangEditor：http://www.wangeditor.com/

② Layui 富文本编辑器：https://www.layui.com/demo/layedit.html

③ ueditor：https://github.com/fex-team/ueditor

2、ueditor

（1）进入ueditor的发布页面。

在这里插入图片描述

（2）下载对应编码的 ueditor 压缩包。

在这里插入图片描述

（3）进入 ueditor1_4_3_3-utf8-jsp\utf8-jsp，将utf8-jsp目录下的文件和文件夹都放到当前工程目录的WebContent文件夹下。

在这里插入图片描述

（4）将 WebContent\jsp\lib 目录下的 jar 文件复制到 WebContent\WEB-INF\lib 目录下，如果 jar 包没有进入编译环境，则需要将其加入编译环境（鼠标右键 -> Build Path -> Add to Build Path）。

在这里插入图片描述

（4）设置config.json文件中imageUrlPrefix为当前项目名，如 /UeditorProject。

    "imageUrlPrefix": "/UeditorProject", /* 图片访问路径前缀 */

（5）在网页文件（html、JSP）中引入js库，并编写富文本编辑器的代码，此时访问该网页就会出现富文本编辑器。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

<style type="text/css">
div {
	width: 100%;
}
</style>
</head>
<body>
	<div>
		<h1>完整demo</h1>
		<form action="bs.do" method="post">
			<input type="text" name="blogtitle"><br />
			<!-- 富文本编辑区域 -->
			<script id="editor" name="blogcontent" type="text/plain" style="width:600px;height:300px;"></script>
				<input type="submit" value="提交">
		</form>
	</div>
	<script type="text/javascript">
		//实例化编辑器
		//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
		var ue = UE.getEditor('editor');
	</script>
</body>
</html>

金海湖底有宝藏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习笔记-Day59 文件上传、富文本编辑器

Java学习笔记-Day59 文件上传、富文本编辑器一、文件上传1、简介2、实现步骤二、富文本编辑器1、简介2、ueditor 一、文件上传 1、简介在 Servlet3.0 以前的版本没有对文件上传进行支持，只能用第三方组件实现。例如 commons.jar 和 commns-io.jar 两个jar包一起使用。在 Servlet3.0 中对文件上传进行了支持，核心接口是Part接口（Post请求、流的操作），该接口中的核心方法如下：方法声明方法描述void de
复制链接

扫一扫