Java Web (ckeditor&smartupload)

各位看官好，好久不见。今天我们来认识一下CKEditor 富文本编辑器以及SmartUpload 文件上传

目录

一、CKEditor

A、在JavaWeb如何使用插件Ckeditor富文本编辑器

Aa、去官方网站下载文件；

Ab、下载后找到文件目录点击Documentation【文档】学习安装并解压

Ac、把整个文件夹复制粘贴到项目中

Ad、把ckeditor.js引用到到需要运用文本框的那个页面

Ae、 在原来的文本框位置下面执行替换代码

注：文本框的name值必须与其替换的值保持一致！

 Af、效果图

二、如何使用第三方上传插件：smartUpload实现文件上传的效果

A、准备工作

Aa、准备好所需要的jar包 smartupload.jar

Ab、导入到项目中 

B、form表单提交方式

Ba、找到form表单

C、单文件上传

Ca、了解客户端的文件到底是上传到哪里去？

Cb、实例化、初始化、设置相关要求

Cc、自动获取web项目的根目录

Cd、手动获取web项目的根目录

D、多文件上传

Da、实例化、初始化、设置相关要求

Db、文件上传

E、加入数据库后

 F、效果展示

---

一、CKEditor

A、在JavaWeb如何使用插件Ckeditor富文本编辑器

Aa、去官方网站下载文件；

【百度网搜索Ckeditor进入官网】

Ab、下载后找到文件目录点击Documentation【文档】学习安装并解压

Ac、把整个文件夹复制粘贴到项目中

Ad、把ckeditor.js引用到到需要运用文本框的那个页面

 注：文件路径不要弄错了!

Ae、 在原来的文本框位置下面执行替换代码

注：文本框的name值必须与其替换的值保持一致！

 Af、效果图

---

二、如何使用第三方上传插件：smartUpload实现文件上传的效果

 

A、准备工作

注：数据库表中的列中存的是文件路径；
图片也要传到服务器上（将本地文件传到服务器项目中，然后将路径存入表字段中）

Aa、准备好所需要的jar包 smartupload.jar

Ab、导入到项目中 

 

B、form表单提交方式

Ba、找到form表单

 表单必须用enctype属性进行封装：

 <form action="" method="post" enctype="multipart/form-data">

 //表示表单将按照二进制的方式提交

C、单文件上传

Ca、了解客户端的文件到底是上传到哪里去？

    //A：数据库里  
    //B：服务器硬盘上的某个文件夹里    √

客户端的文件是上传到服务器的硬盘中的

Cb、实例化、初始化、设置相关要求

    pageContext九大内置对象之一 作用域：仅限于当前页面

	//实例化
	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();

Cc、自动获取web项目的根目录

//定义上传到服务器硬盘的文件夹
	String path="images/";
	//获取第一个文件
	File file= su.getFiles().getFile(0);
	if(!file.isMissing()){//说明选择了
		file.setCharset("utf-8");//设置文件的编码方式
		path+=file.getFileName();//拼接上原有的文件名 images/1.gif
		file.saveAs(path, SmartUpload.SAVE_VIRTUAL);//自动找web项目的根目录
	}
	
	//把path保存到数据库中对应列即可
	out.print(path); 

Cd、手动获取web项目的根目录

//手动获取web项目的根目录
	//D:\Java Web\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\s6\
	String webpath= this.getServletContext().getRealPath("/");
	String path="images/";
	File file= su.getFiles().getFile(0);
	if(!file.isMissing()){
		file.setCharset("utf-8");//设置文件的编码方式
		path+=file.getFileName();//拼接原有文件名 images/3.gif
		file.saveAs(webpath+path);//完整路径
	}
	out.print(path);

D、多文件上传

Da、实例化、初始化、设置相关要求

	//实例化
	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();

Db、文件上传

//多文件上传
	//拿到所有的文件
	Files fs=su.getFiles();
	//拿到上传的总数目   
	int n=fs.getCount();
	//循环
	for(int i=0;i<n;i++){
		//依次获取每一个文件 依次进行上传
		File file=fs.getFile(i);
		String path="images/";
		//判断是否选择了文件
		if(!file.isMissing()){//说明选择了
			file.setCharset("utf-8");//设置文件的编码方式
			path+=file.getFileName();//拼接上原有的文件名 images/2.gif
			file.saveAs(path, SmartUpload.SAVE_VIRTUAL);//自动找web项目的根目录
		}
		out.print(path+"<br>");

E、加入数据库后

 F、效果展示

  OK，以上所有就是今日学习的所有内容了，我是小陽，欢迎个位看官能观看我的文章，如果有写的不好/不足的地方欢迎大家指出来，博主会做出改变，如对各位有所帮助，不介意各位留下免费的三连哦！ 

下期文章知识：三层架构