一、文件上传
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>