Application&富文本编辑器&文件上传

最新推荐文章于 2025-02-20 10:17:46 发布

最新推荐文章于 2025-02-20 10:17:46 发布 · 2.6k 阅读

文章标签：

本文介绍了Application的概念，它作为JSP内置对象用于存储数据。接着讲解了富文本编辑器，如KindEditor、CKEditor和UEditor，以及它们的使用方法。最后，文章阐述了文件上传的过程，包括导入smartupload.jar插件和实现数据处理页面的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Application是什么？

Application是应用程序（Application program)的缩写，表应用程序，某种技术，系统或产品的应用，是JSP九大内置对象之一，作用是可以存储数据。应用程序通常是指可以执行某种功能的软件程序，且Application的操作和Session非常相似。

2.富文本编辑器

富文本编辑器（Rich Text Editor）, 简称"RTE",他类似于Word文档的编辑功能，具有丰富的样式格式的文本。

常用的富文本编辑器：

KindEditor
CKEditor
UEditor

1.1：如何使用

引入相关的js插件：

<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor4/ckeditor.js"></script>

在文本域中绑定富文本编辑器：

	<textarea name="content" class="ckeditor" ></textarea>

结果如图显示：

3.文件上传

3.1：导入插件：把“smartupload.jar”插件复制粘贴到该项目的WebContent——WEB-INF——lib里面

数据处理页面：

public class TestServlet extends HttpServlet{
	String path;//文件上传的路径
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 设置编码
		req.setCharacterEncoding("utf-8");
		try {
	//		文件上传
	//		1.创建smartupload对象
			SmartUpload su = new SmartUpload();
	//		2.设置smartupload编码
			su.setCharset("utf-8");
	//		3.初始化 smartupload
			su.initialize(this.getServletConfig(),req,resp);
	//		4.设置允许上传的文件类型
			su.setAllowedFilesList("gif,png");
	//		5.设置不允许上传的文件类型
			su.setDeniedFilesList("exe,jpg,mp3,avi,mp4");
//			设置允许上传的文件大小
			su.setMaxFileSize(1024*1024);
//			6.准备上传
			su.upload();
//			7.获取选择的第一个文件 ,多文件上传,单文件上传
			File file = su.getFiles().getFile(0);
//			8.判断是否选择了文件
			if(!file.isMissing()) {// 选择了文件 
				// 9.拼接文件路径
				path = "upload"+java.io.File.separator+file.getFileName();
				// 10.上传
				file.saveAs(path);
//				把上传的图片路径path保存到session作用域里面
				req.getSession().setAttribute("path", path);
//				在使用了文件上传之后，要用smartupload里面的request对象获取表单提交的其它数据
				Request request = su.getRequest();
//				获取form表单里面提交的其它数据
				String str = request.getParameter("ckeditor1");
				System.out.println("str = " + str);
				// 跳回到lpd页面
				resp.sendRedirect(req.getContextPath()+"/admin/lpd.jsp");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

显示界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor4/ckeditor.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	头像：
	<%
		if(null != session.getAttribute("path")){
	%><img src="<%=session.getAttribute("path") %>" width="100px" height="100px"/>
	<%
	}else{
	%>
		<img src="<%=request.getContextPath() %>/static/images/微信图片_20220112234340.jpg" width="100px" height="100px"/>
	<%}
	
	%>
	
	<hr/>
	<form action="<%=request.getContextPath() %>/testServlet.do" enctype="multipart/form-data" method="post">
		<div style="width: 90%">
			<textarea class="ckeditor" name="ckeditor1"></textarea>
		</div>
		<div>
			更换头像：<input type="file" name="myfile"/>
		</div>
		<button>提交</button>
	</form>
</body>
</html>