JavaWeb10（富文本编辑器及文件上传功能）

最新推荐文章于 2024-04-04 11:55:07 发布

颖涛

最新推荐文章于 2024-04-04 11:55:07 发布

阅读量217

点赞数 6

文章标签： web java

本文链接：https://blog.csdn.net/m0_67333901/article/details/124199277

版权

富文本编辑器：

是什么？

富文本编辑器，Multi-function Text Editor,简称 MTE，是一种可嵌入于浏览器，所见即所得的文本编辑器

好处就是：在富文本编辑器里面编辑的内容，到浏览器去查看，格式都是一样的

注意：所有在富文本编辑器里面写的东西，都会转成html语句，在控制台能看到

下载？

富文本编辑器有多种，今天主要讲的是第四代富文本编辑器（CKEditor 4），有想深入了解的朋友，可以去官网上查找：

为了方便，这是链接：
点我跳转https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

在官网里面下载成功后，可以将文件解压：

解压成功后，里面所有的文件如下所示：

怎么使用？

在编写代码之前，我们要先将解压后的文件夹导入到webapp的下方，就像这样：

三部曲：

1.导入js

2.定义文本域，注意文本域需要id

3.根据id生成对应的富文本编辑器

使用富文本编辑器增加内容，看下图：

文件上传编写：

可以上传图片，视频，动图等

文件的上传，需要用到我们的文件选择器，

那么首先我们得先导入两个jar包，咱不用smartUpload，因为目前已经停更了，咱可以用commons fileUpload的jar包，

还记得吗，我们导入的jar包应该放在哪个目录下面呢？（lib项目下方哦~），导入后，右键选择Build Path，点击牛奶瓶，一系列操作成功后，就会出来三个牛奶瓶：

图片上传？

图片上传本质：

自己的电脑——>服务器的电脑

文件是保存在服务器？还是数据库呢？

用户怎么区分自己的数据呢？

1. 将图片保存到硬盘中

2. 将图片的路径存到数据库

文件上传必须注意的规则：

1. 必须是post method=“post”

2. 必须是多段式表单 ectype="multipart/form-date"

小知识点：

在doAdd.jsp界面中，item.getString()里面的参数是charset类型，所以我们应该写上utf-8，原理就是：破碎重组，防止乱码

String value = item.getString("utf-8");//对应的值

文件夹的映射：

原理：只要把文件夹映射到服务器中，用户就可以访问那张保存的图片了

具体的代码展示：

index.jsp页面：


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<%--导入js --%>
	<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
<%--
	文件上传必须注意的规则：
	1. 必须是post  method="post"
	2. 必须是多段式表单 enctype="multipart/form-date"
 
 --%>
<form action="doAdd.jsp" method="post" enctype="multipart/form-date" >
	<p><input type="text" name="title"></p>
	<p>
		<%--定义文本域 文本域需要id --%>
		<textarea id="myEditor" name="content"></textarea>
	</p>
	<p>
		<%--文件选择器 --%>
		<input type="file" name="myFile">
	</p>
	<button>提交</button>
</form>
 
<script >
	/*根据id生成对应的富文本编辑器 */
	CKEDITOR.replace('myEditor');
</script>
</body>
</html>

doAdd.jsp 处理增加的界面：


<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@ page import="org.apache.commons.fileupload.FileItem" %>
<%@ page import="java.util.List" %>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.UUID" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	//String title=request.getParameter("title");
	//String content=request.getParameter("content");
	//System.out.print(content);//所有在富文本编辑器里面写的东西，都会转成html语句
	//out.print(content);
	
    // 通过tomcat去上传图片
 
    // 用轮子 jar 文件上传的jar
    // 1. smartUpload (已经停止更新n年了)
    // 2. commons fileUpload
 
    // 为基于磁盘的文件项创建工厂
    // 接收到你的图片,将图片存到电脑磁盘上
    DiskFileItemFactory factory = new DiskFileItemFactory();
 
    // 创建一个新的文件上传处理程序
    ServletFileUpload upload = new ServletFileUpload(factory);
 
    // 设置整体请求大小限制
   // upload.setSizeMax(1024*5);//5mb
 
    // 让处理程序去解析请求中的数据
    List<FileItem> items = upload.parseRequest(request);
    //  在List中有普通的数据,文件数据
 
    String title="";
    String content="";
    String newName="";
 
    for (FileItem item : items) {
        // item有可能是文件,普通数据
        if (item.isFormField()) {//是不是普通数据
            System.out.println("普通:");
            // title,content
            String name = item.getFieldName();//表单中的name
            String value = item.getString("utf-8");//对应的值
            System.out.println("\t"+name);
            System.out.println("\t"+value);
            //需要进行判断取值
            if(name.equals("title")){
                title=value;
            }
            if(name.equals("content")){
                content=value;
            }
        } else {
            System.out.println("文件:");
            //myFile
            String name = item.getFieldName();//表单中的name
            String oldName=item.getName();//文件名字
            System.out.println("\t"+name);
            System.out.println("\t"+oldName);
 
            //生成一个新的名字: 不重复
           // UUID:通用唯一识别码
            newName = UUID.randomUUID().toString().replace("-", "");
 
            //生成动态的后缀名
            //  a.png -> .png
            //  f.jpg -> .jpg
            //      2022040.13.5221.mp4
            //      [2022040,13,5221,mp4]
            String[] strings = oldName.split("\\.");
 
            // id.jpg
            newName+="."+strings[strings.length-1];
 
            //保存到本地
            item.write(new File("D:\\upload"+newName));
        }
    }
 
    //打印一下
    out.println(title);
    out.println(content);
 
    //图片上传的本质
    //  自己的电脑 -> 服务器的电脑
    //  文件是保存在服务器?还是数据库呢?
 
    //  用户怎么区分自己的数据呢?
    //  1.将图片保存到硬盘中
    //  2.将图片的路径存到数据库
 
    //  我只要吧文件夹映射到服务器中,用户就可以访问那张保存的图片
    //  我把文件夹映射到服务器中，它的路径是/images
    out.print("<img src='/upload/"+newName+"'>");
 
%>

颖涛

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb10（富文本编辑器及文件上传功能）

富文本编辑器：是什么？富文本编辑器，Multi-function Text Editor,简称 MTE，是一种可嵌入于浏览器，所见即所得的文本编辑器好处就是：在富文本编辑器里面编辑的内容，到浏览器去查看，格式都是一样的注意：所有在富文本编辑器里面写的东西，都会转成html语句，在控制台能看到下载？富文本编辑器有多种，今天主要讲的是第四代富文本编辑器（CKEditor 4），有想深入了解的朋友，可以去官网上查找：为了方便，这是链接：点我跳转https://ckeditor.com/
复制链接

扫一扫