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

下期文章知识:三层架构

  • 3
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页
评论

打赏作者

歐陽。

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值