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