0
点赞
收藏
分享

微信扫一扫

富文本编辑器与文件上传

老罗话编程 2022-04-13 阅读 53

富文本编辑器与文件上传

富文本编辑器

什么是富文本编辑器:

常用的富文本编辑器:

使用富文本编辑器:

在这里插入图片描述

开始使用富文本编辑器:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>suibian</title>
</head>
<!-- 先导入富文本编辑器 -->
<script src="ckeditor/ckeditor.jsp"></script>
<body>
<!-- 一般富文本编辑器用于表单中的文本域 -->
<form action="" method="post">
<!-- 定义一个文本域,让其具有一个id -->
<textarea name="content" id="myEditor"></textarea>
</form>
<script>
//根据id生成富文本编辑器
CKEDITOR.replace('myEditor')
</script>
</body>
</html>

文件上传

在这里插入图片描述

实例:(为新闻项目的补充)

add.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻增加界面</title>
<!-- 先将下载后的富文本编辑器文件夹复制到项目的webapp目录下,再: -->
<!-- 1.导入src:ckeditor目录下面的ckeditor.js -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
	<%--
	文件上传中表单必须注意的规则:
    	1. 必须是post method="POST"
   	 	2. 必须是多段式表单 enctype="multipart/form-data"
   	 但是多段式表单出现中文乱码情况时不能用request.getCharacterEncoding()来解决
   	 ,因为这种方法只对普通表单有用,对于多段式表单,可以使用破碎重组
	--%>
	<form action="doAdd1.jsp" method="post" enctype="multipart/form-data">
		<p><input type="text" name="title"></p>
	<p>
		<!-- 2.定义文本域,具备id -->
		<textarea name="content" id="myEditor"></textarea>
	</p>
		<%--文件选择器--%>
        <input type="file" name="myFile">
	<button>提交</button>
	</form>
	<script>
		//根据id生成富文本编辑器
		CKEDITOR.replace('myEditor');
	</script>
</body>
</html>

doAdd.jsp:

<%@page import="java.util.UUID"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%--
多段式表单 enctype="multipart/form-data"
但是多段式表单出现中文乱码情况时不能用request.getCharacterEncoding()来解决
,因为这种方法只对普通表单有用,对于多段式表单,可以使用破碎重组,或者getString("utf-8")在拿值的时候将它设置为中文
--%>
<%
// 为基于磁盘的文件项创建工厂
//比如:你上传一张图片到CSDN上
// CSDN的服务器就会:接收到你的图片,将图片存到电脑磁盘上
DiskFileItemFactory factory = new DiskFileItemFactory();

// 创建一个新的文件上传处理程序:upload对象
ServletFileUpload upload = new ServletFileUpload(factory);

String title="";
String content="";
String newName="";
// 让处理程序(upload对象)去解析请求中的数据
// 因为请求中的数据不止是图片,还有很多数据需要解析处理
List<FileItem> items = upload.parseRequest(request);
// 在List中有普通的数据、文件数据
for (FileItem item : items) {
if(item.isFormField()){//是普通的数据,如新闻标题,新闻内容
//拿到这些数据
String name = item.getFieldName();//取表单中的name属性
String value = item.getString("utf-8");//取name属性对应的值!
//需要进行判断取值
if(name.equals("title")){
title=value;
}
if(name.equals("content")){
content=value;
}
}else{//是文件数据,如图片
//拿到这些数据
String name = item.getFieldName();//取表单中的name
String oldName=item.getName();//取文件的名字!
//防止文件名字重复:生成一个新名字
newName = UUID.randomUUID().toString().replace("-", "");//UUID
//生成动态的文件后缀名:.png,.jpg,.gif,.mp4......等等
//将文件原来的名字进行切割:
//切割前:2022040.13.5221.mp4
//切割后:[2022040,13,5221,mp4]
String[] strings = oldName.split("\\.");//.代表任意字符,要使用转义符/将它转成真正的.点
newName+="."+strings[strings.length-1];//拿到切割后数组的最后一位:.xxx
//如果是文件就将文件保存到本地
item.write(new File("E:\\icons\\"+newName));
}
}
%>

文件夹的映射

在eclipse中双击服务器(找不到服务器的,可以在视图打开):

在这里插入图片描述

映射完成之后就可以在网页上浏览你文件夹里的文件了

将文件输出在网页上的代码:

out.print("<img src='/upload/"+fileName+"'>");//upload为导入后的路径名,fileName为文件名
举报

相关推荐

0 条评论