富文本编辑器&文件上传

一、文件上传  

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> 1 2 3 4 5 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 {} 1 2 3 (3)从文件域获取上传的文件。

//文件上传:3、获取上传文件 Part part = request.getPart("myfile"); 1 2 (4)将文件写入目标位置。

// 文件上传:4、将文件写入目标位置(tomcat中的webapps下的picture目录) // 获取实际路径 String path = request.getServletContext().getRealPath("/picture/"); // 获取文件名 String picpath = path+part.getSubmittedFileName(); // 将文件写入目标位置 part.write(picpath); 1 2 3 4 5 6 7   注意:在数据库只存储图片的路径,图片可以存储在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

经验分享 程序员 微信小程序 职场和发展