JavaWeb(ckeditor&smartupload)

最新推荐文章于 2024-08-03 04:40:22 发布

雨沐笙

最新推荐文章于 2024-08-03 04:40:22 发布

阅读量432

点赞数

文章标签： java 前端

本文链接：https://blog.csdn.net/m0_62604616/article/details/124069763

版权

前言

今天带来的知识点一个是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>

总结

好了今日的分享就到这里，感谢阅读