web.富文本编辑与文件上传

我们可以通过富文本编辑调节文本的格式，也可以上传图片，文件上传可以上传图片，视频

文件上传必须注意的规则:
1. 必须是post method="POST"
2. 必须是多段式表单 enctype="multipart/form-data"

一.生成富文本编辑器

<form action="" method="POST" enctype="multipart/form-data">
<p><input type="text" name="n"></p>
<!-- 定义文本域  文本域需要id -->
<p><textarea id="a" name="b"></textarea></p>
<p><input type="file" name="file"></p>
<p><button>提交</button></p>
</form>
<script>
/*根据id生成对应的富文本编辑器*/
 CKEDITOR.replace('a');
</script>

二.文件上传

通过tomcat去上传图片
用轮子 jar 文件上传的jar
我们常用的轮子commons fileUpload

1.接收到你的图片,将图片存到电脑磁盘上
DiskFileItemFactory factory = new DiskFileItemFactory();
2.创建一个新的文件上传处理程序
ServletFileUpload upload = new ServletFileUpload(factory);

3.让处理程序去解析请求中的数据
List<FileItem> items = upload.parseRequest(request);

4.遍历数据

5.必须导入两个jar包，搜索commons fileUpload可以拿到

 

// 接收到你的图片,将图片存到电脑磁盘上
    DiskFileItemFactory factory = new DiskFileItemFactory();
    // 创建一个新的文件上传处理程序
    ServletFileUpload upload = new ServletFileUpload(factory);
    // 设置整体请求大小限制
   // upload.setSizeMax(1024*5);//5mb
    // 让处理程序去解析请求中的数据
    List<FileItem> items = upload.parseRequest(request);
    //  在List中有普通的数据,文件数据
    String n="";
    String b="";
    String newname="";
    for(FileItem item:items){
    	// item有可能是文件,普通数据
    	if(item.isFormField()){
    		String name=item.getFieldName();//拿表单的name
    		String value=item.getString("utf-8");
    		//需要进行判断取值
    		if(name.equals("n")){
    			n=value;
    		}
    		if(name.equals("b")){
    			b=value;
    		}else{
    			String oldname=item.getName();//文件名字
    			//生成一个不重复的名字,-替换成空字符串
    			newname=UUID.randomUUID().toString().replace("-","");
    			//生成后缀
    			String[] old=oldname.split("\\.");
    			newname+="."+old[old.length-1];
    			//保存到本地,write写，new一个文件
    			item.write(new File("F:\\LWD\\tp\\"+newname));
    		}
    	}
    }

注：newname=UUID.randomUUID().toString().replace("-","");

生成一个不重复的名字,-替换成空字符串

一个非常值得学习的小技巧

三.映射

图片上传的本质
自己的电脑 -> 服务器的电脑
文件是保存在服务器?还是数据库呢?

用户怎么区分自己的数据呢?
1.将图片保存到硬盘中
2.将图片的路径存到数据库

我只要把文件夹映射到服务器中,用户就可以访问那张保存的图片
我把文件夹映射到服务器中，它的路径是/images
out.print("<img src='/images/"+newname+"'>");

操作：双击服务器选到当前界面，在点击右手边第二个增加，第一个是填文件夹位置，第二个是访问路径