目录
富文本编辑器
1.概述
2.常用的富文本编辑器
3.CKeditor的使用步骤
案例：在新闻发布网页中使用
文件上传
1.概述
2.原理
实现方式
SmartUpload组件
1.核心类
2.SmartUpload
2.1概述
2.2上传文件使用的方法
2.3下载文件常用的方法
3.Files
3.1概述
3.2常用方法
4.File
4.1概述
4.2常用方法
5.Request
5.1 概述
5.2 常用方法
6.注意事项
案例:上传图片
思维导图总结
富文本编辑器
1.概述
富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器，类似于 Microsoft Word 的编辑功能。
2.常用的富文本编辑器
①ckeditor
②Kindeditor
③ueditor
④wangEditor
⑤SmartMarkUP
⑥Control.Editor
⑦EditArea
⑧Free Rich Text Editor
3.CKeditor的使用步骤
【步骤一】官网https://ckeditor.com/ 下载-解压-引入
【步骤二】
<script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace("ncontent");
</script>
案例：在新闻发布网页中使用
主要插入一个插件，通过script导入进页面，在调用方法将文本域替代。
<script type="text/javascript">
CKEDITOR.replace("ncontent");
</script>
发布页面的form表单代码
<form action="doAddNews.jsp" method="post">
<p>
<label> 主题 </label> <select name="ntid">
<!-- 新闻分类的数据绑定 start -->
<%
//需求：1.完成新闻分类的数据绑定
//加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//建立连接
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl", "scott","123");
//sql语句
String sql = "select * from tb_news_theme";
//传入方法返回执行对象
PreparedStatement ps = conn.prepareStatement(sql);
//调用方法返回结果集对象
ResultSet rs = ps.executeQuery();
//遍历结果集
while(rs.next()){
out.println("<option value = '"+rs.getInt(1)+"'>"+rs.getString(2)+"</option>");
}
%>
</select>
</p>
<!-- 新闻分类的数据绑定 end -->
<p>
<label> 标题 </label> <input name="ntitle" type="text"
class="opt_input" />
</p>
<p>
<label> 作者 </label> <input name="nauthor" type="text"
class="opt_input" />
</p>
<p>
<label> 摘要 </label>
<textarea name="nsummary" cols="40" rows="3"></textarea>
</p>
<p>
<label> 内容 </label>
<!-- 通过富文本编辑器插件将textarea显示为富文本编辑器风格 -->
<textarea name="ncontent" cols="70" rows="10" id="ncontent">
</textarea>
<script type="text/javascript">
CKEDITOR.replace("ncontent");
</script>
</p>
<p>
<label> 上传图片 </label> <input name="file" type="file"
class="opt_input" />
</p>
<input name="action" type="hidden" value="addnews"> <input
type="submit" value="提交" class="opt_sub" /> <input type="reset"
value="重置" class="opt_sub" />
</form>数据处理页面：
<%
//作用：获取新增表单的数据进行数据库交互
//1.编码格式
request.setCharacterEncoding("utf-8");
//2.获取表单提交的数据
//编号
int nid = 0;//定义一个变量保存最终的id
//链接数据库查询到最大的id 最后+1
//加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//建立连接
String url = "jdbc:oracle:thin:@localhost:1521:orcl";
Connection conn = DriverManager.getConnection(url, "scott", "123");
String sql = "select nvl(max(nid),0) from tb_news";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
if(rs.next()){
nid = rs.getInt(1)+1;
}
//新闻分类id
String tid = request.getParameter("ntid");
int ntid = Integer.valueOf(tid);
//标题
String ntitle = request.getParameter("ntitle");
//作者
String nauthor = request.getParameter("nauthor");
//摘要
String nsummary = request.getParameter("nsummary");
//内容
String ncontent = request.getParameter("ncontent");
//图片 (默认 到时再说)
//日期 （获取系统时间）
//点击量 默认0
//新增新闻
sql = "insert into tb_news(nid,ntid,ntitle,nauthor,nsummary,ncontent,ndate,ncount) values (?,?,?,?,?,?,sysdate,0)";
ps = conn.prepareStatement(sql);
ps.setInt(1, nid);
ps.setInt(2,ntid);
ps.setString(3,ntitle);
ps.setString(4,nauthor);
ps.setString(5,nsummary);
ps.setString(6,ncontent);
int n = ps.executeUpdate();
if(n>0){
out.print("<script>alert('发布成功');location.href='admin.jsp'</script>");
}else{
out.print("<script>alert('发布失败');location.href='add_news.jsp'</script>");
}
%>文件上传
1.概述
将本地文件上传到服务器端，从服务器端下载文件到本地的过程。例如目前网站需要上传头像、上传下载图片或网盘等功能都是利用文件上传下载功能实现的。
2.原理
文件上传
（1）客户端浏览器通过文件浏览框，选择需要上传的文件内容（其中包括文件路径及文件内容）。
（2）客户端浏览器通过点击上传按钮，将本地文件上传到服务器端。
（3）服务器端通过程序接收本地文件内容，并将其保存在服务器端磁盘中。
文件下载
（1）客户端浏览器通过点击下载按钮，将服务器端保存的文件下载到本地磁盘。
（2）服务器端通过程序将服务器端文件响应给客户端。
实现方式
SmartUpload组件
Apache CommonsFileUpload组件
Servlet 3.0 文件上传
SmartUpload组件
1.核心类
SmartUpload
Files
File
Request
2.SmartUpload
2.1概述
该类完成上传下载工作。
2.2上传文件使用的方法
public final void initialize(javax.servlet.jsp.PageContext pageContext)
（1）执行上传下载的初始化工作，必须第一个执行。
（2）pageContext为JSP页面内置对象（页面上下文）
public void upload()
（1）上传文件数据。对于上传操作，第一步执行initialize方法，第二步就要执行这个方法。
public int save(String destPathName)
（1）将全部上传文件保存到指定目录下，并返回保存的文件个数。
public int save(String destPathName,int option)
** 将全部上传文件保存到指定目录下，并返回保存的文件个数。
** option：
** SAVE_PHYSICAL指示组件将文件保存到以操作系统根目录为文件根目录的目录下
** AVE_VIRTUAL指示组件将文件保存到以Web应用程序根目录为文件根目录的目录下
** SAVE_AUTO则表示由组件自动选择
public Files getFiles()
** 取全部上传文件，以Files对象形式返回，可以利用Files类的操作方法来获得上传文件的数目等信息
public Request getRequest()
** 取得Request对象，以便由此对象获得上传表单参数之值。
public void setAllowedFilesList(String allowedFilesList)
** 设定允许上传带有指定扩展名的文件，当上传过程中有文件名不允许时，组件将抛出异常
public void setDeniedFilesList(String deniedFilesList)
** 用于限制上传那些带有指定扩展名的文件。若有文件扩展名被限制，则上传时组件将抛出异常。
public void setMaxFileSize(long maxFileSize)
** 设定每个文件允许上传的最大长度。
public void setTotalMaxFileSize(long totalMaxFileSize)
** 设定允许上传的文件的总长度，用于限制一次性上传的数据量大小。
2.3下载文件常用的方法
public void setContentDisposition(String contentDisposition)
** 将数据追加到MIME文件头的CONTENT-DISPOSITION域。jspSmartUpload组件会在返回下载的信息时自动填写MIME文件头的CONTENT-DISPOSITION域，如果用户需要添加额外信息，请用此方法。
downloadFile 下载文件
① public void downloadFile(String sourceFilePathName)
** 其中，sourceFilePathName为要下载的文件名（带目录的文件全名）
② public void downloadFile(String sourceFilePathName,String contentType)
** 其中，sourceFilePathName为要下载的文件名（带目录的文件全名）,contentType为内容类型（MIME格式的文件类型信息，可被浏览器识别）。
③ public void downloadFile(String sourceFilePathName,String contentType,String destFileName)
** 其中，sourceFilePathName为要下载的文件名（带目录的文件全名）,contentType为内容类型（MIME格式的文件类型信息，可被浏览器识别）,destFileName为下载后默认的另存文件名。
3.Files
3.1概述
这个类表示所有上传文件的集合，通过它可以得到上传文件的数目、大小等信息。
3.2常用方法
public int getCount()
** 取得上传文件的数目。
public File getFile(int index)。其中，index为指定位移，其值在0到getCount()-1之间。
** 取得指定位移处的文件对象File（这是com.jspsmart.upload.File，不是java.io.File，注意区分）。
public long getSize()
** 取得上传文件的总长度，可用于限制一次性上传的数据量大小。
public Collection getCollection()
** 将所有上传文件对象以Collection的形式返回，以便其它应用程序引用，浏览上传文件信息。
public Enumeration getEnumeration()
** 将所有上传文件对象以Enumeration（枚举）的形式返回，以便其它应用程序浏览上传文件信息。
4.File
4.1概述
这个类包装了一个上传文件的所有信息。通过它，可以得到上传文件的文件名、文件大小、扩展名、文件数据等信息。
4.2常用方法
public void saveAs(java.lang.String destFilePathName) 或public void saveAs(java.lang.String destFilePathName, int optionSaveAs)
** destFilePathName是另存的文件名
** optionSaveAs
*** SAVEAS_PHYSICAL表明以操作系统的根目录为文件根目录另存文件
*** SAVEAS_VIRTUAL表明以Web应用程序的根目录为文件根目录另存文件
*** SAVEAS_AUTO则表示让组件决定，当Web应用程序的根目录存在另存文件的目录时，它会选择SAVEAS_VIRTUAL，否则会选择SAVEAS_PHYSICAL
public boolean isMissing()
** 这个方法用于判断用户是否选择了文件，也即对应的表单项是否有值。选择了文件时，它返回false。未选文件时，它返回true。
public String getFieldName()
** 取HTML表单中对应于此上传文件的表单项的名字。
public String getFileName()
** 取文件名（不含目录信息）
public String getFilePathName
** 取文件全名（带目录）
public String getFileExt()
** 取文件扩展名（后缀）
public int getSize()
** 取文件长度（以字节计）
public byte getBinaryData(int index)。其中，index表示位移，其值在0到getSize()-1之间。
** 取文件数据中指定位移处的一个字节，用于检测文件等处理。
5.Request
5.1 概述
这个类的功能等同于JSP内置的对象request。只所以提供这个类，是因为对于文件上传表单，通过request对象无法获得表单项的值，必须通过jspSmartUpload组件提供的Request对象来获取。
5.2 常用方法
public String getParameter(String name)。其中，name为参数的名字。
** 获取指定参数之值。当参数不存在时，返回值为null。
public String[] getParameterValues(String name)。其中，name为参数的名字。
** 当一个参数可以有多个值时，用此方法来取其值。它返回的是一个字符串数组。当参数不存在时，返回值为null。
public Enumeration getParameterNames()
** 取得Request对象中所有参数的名字，用于遍历所有参数。它返回的是一个枚举型的对象
6.注意事项
（1）表单请求方式必须为POST
（2）设置enctype="multipart/form-data"，专用于文件传输
（3）文件标签需设置name属性
案例:上传图片
主界面
<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
需求：使用SmartUpload组件实现文件上传
文件上传后，图片存储到那个位置去了？
图片----保存在web服务器（tomcat中），不是保存在数据库
-->
<h1>文件上传演示</h1>
<hr/>
<form enctype="multipart/form-data" action="doFileDemo.jsp" method = "post">
用户: <input type = "text" name = "username"/>
<br/>
头像: <input type = "file" name = "nfile"/>
<input type = "submit" value = "上传头像"/>
</form>
</body>
</html>数据处理界面
setMaxFileSize 设置限制每个文件的最大长度 字节为单位B。
<%@page import="com.jspsmart.upload.Request"%>
<%@page import="com.jspsmart.upload.File"%>
<%@page import="com.jspsmart.upload.SmartUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//不行的 获取不到 通过smartupload组件中提供的request对象获取
/* request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
out.println("username = "+username+"<br/>"); */
//1.实例化SmartUpload组件对象
SmartUpload su = new SmartUpload();
//2.调用初始化组件的方法（钥匙激活）
su.initialize(pageContext);//pageContext内置对象
//3.设置相关要求（允许上传的类型文件，不允许上传的类型文件，限制文件的大小）
//setAllowFilesList 允许上传的文件类型
String allow = "jpg,jpeg,png";
//setDeniedFilesList 不允许上传的文件类型
String denied = "avi,mp4,mp3,wmv,txt";
//setMaxFileSize 设置限制每个文件的最大长度 字节为单位 不是KB
long maxFileSize = 1024*1024*1024;
//setTotalMaxFileSIze 设置限制总文件的最大长度
long totalMaxFileSize = 1024*1024;
try{
//重新设置SmartUpload组件上传文件的编码格式
su.setCharset("UTF-8");
su.setAllowedFilesList(allow);
su.setDeniedFilesList(denied);
su.setMaxFileSize(maxFileSize);
su.setTotalMaxFileSize(totalMaxFileSize);
//4.调用上传的方法 （上传之后，图片暂时存储到内存上）
su.upload();
//5.实际性的保存（最终将图片存储到web服务器中【tomcat】）
//su.getFiles() 获取所有的图片数组 根据下标获取第一个
//获取选中的第一张图片
File file = su.getFiles().getFile(0);
//判断是否选中
String filePath = "upload//";
if(!file.isMissing()){//选中了文件
//根据选中的文件获取当前的文件名称
String fileName = file.getFileName();
//System.out.println(fileName);
filePath+=fileName;
}
//将内存上的文件保存到当前web服务器中 web_10_file的upload文件夹内
file.saveAs(filePath, SmartUpload.SAVE_AUTO);
out.println("上传成功");
System.out.println(filePath);
}catch(Exception e){
e.printStackTrace();
}
//通过smartupload组件提供的request对象获取其它输入项的值
//获取request对象
Request req = su.getRequest();
//获取用户名
String username = req.getParameter("username");
out.println("<hr/>username="+username);
%>思维导图总结
