javaWeb10(ckeditor&smartupload)

Everybody晚上好！

今天给大家带来的是我们经常用到的最常见的———富文本编辑器，以及图片的上传与展示操作

一，富文本编辑器

什么是富文本编辑器以及它的作用：

通俗一点其实就是我们平常使用的输入法，可以让我们在网页文本框中不仅能提交文字，还能提交符号以及表情以及其他

如何使用：

1.先去官方网站下载文件：百度搜索Ckeditor进入官网

2.点击Docunmentation[学习安装并解压]

3.把文件夹复制到项目中

4.把ckeditor.js引入到需要使用的页面，如下：

 5.在原来的文本框位置下方写入此代码：（文本框中的name值必须与其replace后的值保持一致）

<p>
        <label> 内容 </label>
        <textarea name="ncontent" cols="70" rows="10"></textarea>
            <script>
               CKEDITOR.replace( 'ncontent' );
            </script>
      </p>

之后就可以发送各种内容啦！

二，使用Smartupload进行文件上传

首先我们需要在文本框所在的表单的头部写上：enctype="multipart/form-data"***（二进制模式提交图片）

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

写入时一定要细心，输入错误即无效

若需实现多文件上传 就在文件选择器的位置加一句代码：multiple="multiple"

<label> 上传图片 </label>
        <!-- multiple="multiple" 获取多个文件 -->
        <input name="file" type="file" class="opt_input" multiple="multiple" />

 接下来就要点击提交跳转到纯逻辑页面：

我们需要

1.实例化以及初始化SmarUpload

2.设置上传图片的一些相关要求如何上传到服务器内存

3.拿到所有的文件以及文件总数

4.定义一个路径放入循环中

5.把路径连同提交过来的其他内容提交到数据库即可

步骤放在此代码段中：

	//实现文件上传
	//--自动获取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.setMaxFileSize(512*512);//文件大小
	
	//上传到服务器内存
	su.upload();
	
	
	//实现多文件上传
	//拿到所有的文件
	Files fs=su.getFiles();
	//拿到上传的总数目
	int m=fs.getCount();
	String path="";
	//循环
	for(int i=0;i<m;i++){
		//依次获取每一个文件 依次进行上传
		File file=fs.getFile(i);
		path="images/";
		if(!file.isMissing()){//说明选择了
			file.setCharset("utf-8");//设置文件的编码方式
			path+=file.getFileName();//拼接上原有的文件名 images/1.gif
			file.saveAs(path, SmartUpload.SAVE_VIRTUAL);//自动找Web项目的根目录
		}
	}

在这之后我们会发现获取不到表单提交过来的数据了，是因为我们改变了form表单的提交方式，所以现在用request.get已经失效了，我们需要使用来自Smartupload团队研发的模拟版的request来取值：

Request req=su.getRequest();

//设置编码方式
request.setCharacterEncoding("utf-8");
//接收表单提交过来的值
String ntid=req.getParameter("ntid");

以上就是今天的学习内容，大家要按照步骤一步一步慢慢来，否则很容易出错，如有不足还希望各位多多指点，下一期我将分享三层架构