前言
今天带来的知识点一个是ckeditor富文本编辑器,另一个是smartupload文件上传
提示:以下是本篇文章正文内容,下面案例可供参考
一、ckeditor
ckeditor是一个富文本编辑器,一般作用于对文字的编辑,需要加粗,改变字体颜色等,都需要使用到富文本编辑器,不止这一个文本编辑,还有1.Kindeditor 2.ueditor 3.wangEditor 4.SmartMarkUP 5.Control.Editor 6.EditArea 7.Free Rich Text Editor 这些
下载方式:
在搜索栏里面输入ckeditor,选择第一个
图例:
进入页面后,我们只要往下走到底部,官方一般推荐的都是最新版的,但是我推荐 ckeditor4,因为较为稳点
图例:
我们点击后,然后点击下载,在没有点击下载之前有一些演示,可以看看,了解一些
官方会给我们推荐标准版的我们只要下载就可以
下载完之后,我们只需要解压即可。
使用步骤:
1、在页面中包含加载 CKEditor 4 的元素。之前我们需要将整个文件导入项目中
图:
2、使用 CKEDITOR.replace() 方法将现有元素替换为 CKEditor 4。
示例代码块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor 4</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor 4.
</textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
二、smartupload
1.简介
- SmartUpload组件 专门用于实现文件上传及下载的免费组件
- SmartUpload组件特点
- 使用简单:编写少量代码,完成上传下载功能
- 能够控制上传内容
- 能够控制上传文件的大小、类型
- 缺点:目前已停止更新服务
2.应用条件
使用SmartUpload组件需要在项目中引入jspsmartupload.jar文件
需要设置表单的enctype属性
注意:设置了enctype属性后, 表单必须以post方式提交
3.File类及方法
File类
封装了单个上传文件所包含的所有信息 常用方法
方法名称 | 说 明 |
saveAs(String destFilePathName) | 将文件保存,参数destFilePathName是保存的文件名 |
isMissing( ) | 判断用户是否选择了文件,即对应表单项是否为空,返回值为boolean类型 |
public String getFieldName( ) | 获取表单中当前上传文件所对应的表单项的名称 |
public String getFileName( ) | 获取上传文件的文件名称,不包含路径 |
属性名称 | 说 明 |
public int getCount() | 取得文件上传的数目 |
public File getFile(int index) | 取得指定位置的File文件对象 |
public long getSize() | 取得上传文件的总长度 |
public Collection getCollection() | 将所有上传文件对象以Collection的形式返回 |
SmartUpload类
属性名称 | 说 明 |
public final void initialize(PageContext pageContext) | 执行上传和下载的初始化工作,必须实现 |
public void upload() | 实现文件数据的上传,在initialize方法后执行 |
public int save(String pathName) | 将全部上传文件保存到指定的目录下,并返回保存的文件个数 |
public void setAllowFilesList(String ExtList) | 指定允许上传的文件扩展名,接收一个扩展名列表,以逗号分隔 |
public void setDeniedFilesList( String fileList) | 指定了禁止上传的文件扩展名列表,每个扩展名之间以逗号分隔 |
public void setMaxFileSize(long filesize) | 设定每个文件允许上传的最大长度 |
public void setTotalMaxFileSIze(long totalfilesize) | 设定允许上传文件的总长度 |
底层代码块:
<%
//单文件上传
//--自动获取web项目的根目录
//实例化
SmartUpload su=new SmartUpload();
//初始化 pageContext属于就打内置对象之一 作用域仅限于当前页面
su.initialize(pageContext);
//设置相关要求
su.setCharset("utf-8");//设置编码方式
su.setAllowedFilesList("jpg,png,gif,jpeg");//允许文件上传列表
su.setDeniedFilesList("exe,jsp,bat");//禁止上传文件类型列表
//上传到服务器内存
su.upload();
//定义上传到服务器硬盘的文件夹
/* String path="iamges/";
//获取第一个文件
File file=su.getFiles().getFile(0);
//判断是否选择了文件
if(file.isMissing()==false){//说明选择了
file.setCharset("utf-8");//设置文件的编码方式
path+=file.getFieldName();//拼接上原有的文件 images/2.gif
file.saveAs(path,SmartUpload.SAVE_VIRTUAL);//自动找web项目的根目录
}
//把path保存到数据库中对应列即可
out.print(path); */
//--手动获取web项目的根目录
//先找到web项目的根目录
/* String webPath=this.getServletContext().getRealPath("/");
String path="iamges/";
//获取第一行文件
File file=su.getFiles().getFile(0);
if(!file.isMissing()){
file.setCharset("utf-8");//设置文件的编码方式
path+=file.getFieldName();//拼接上原有的文件
file.saveAs(webPath+path);//完整路径
}
out.print(path); */
//建议在上文件之后再取表单其他值
//获取requset对象
/* Request req=su.getRequest();
String name=request.getParameter("iname");
out.print("<br/>取到了"+name); */
//多文件上传
//拿到所有文件
Files fs=su.getFiles();
//拿到总数目
int n=fs.getCount();
//循环
for(int i=0;i<n;i++){
//依次取每一次文件 依次进行上传
File file=fs.getFile(i);
String path="iamges/";
//判断是否选择了文件
if(file.isMissing()==false){//说明选择了
file.setCharset("utf-8");//设置文件的编码方式
path+=file.getFieldName();//拼接上原有的文件 images/2.gif
file.saveAs(path,SmartUpload.SAVE_VIRTUAL);//自动找web项目的根目录
}
out.print(path+"<br>");
}
%>
页面代码块:
<body>
<!-- 注册表单 enctype="multipart/form-date":以二进制方式提交表单 -->
<form action="doindex.jsp" enctype="multipart/form-date" method="post">
用户名:<input type="text" name="iname"><br>
头像:<input type="file" name="ifile" multiple="multiple"/><br>
<input type="submit" value="注册"/>
<input type="reset" value="清空">
</form>
</body>
总结
好了今日的分享就到这里,感谢阅读