JavaWEB（CKeditor&SmartUpload）

最新推荐文章于 2024-07-30 20:50:32 发布

第五天537

最新推荐文章于 2024-07-30 20:50:32 发布

阅读量891

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_64549900/article/details/124086612

版权

CKeditor（富文本）

概述：

步骤：
			1.进入CKeditor官网下载（Full版本）
			2.将下载的文件解压后  复制到webContent根目录下
			3.将指定的JSP页面中通过script标签引入插件js文件
			4.找到页面中指定的textarea标签  设置name属性和id属性
			5.编写脚本（JS），通过CKEDITOR对象（该对象来源于ckeditor.js中）调用replace方法
				来将textarea标签替换成富文本编辑器  【 根据name属性来进行替换的】
	
		通过富文本编辑器所保存的内容  都会携带对应样式标签

演示

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "ckeditor/ckeditor.js"></script>
</head>
<body>
	
	<form action = "success.jsp" method = "post">
		<textarea name = "ncontent" id = "ncontent">
	
		</textarea>
		<input type = "submit" value = "跳转"/>
	</form>
	
	<script type="text/javascript">
	
		//CKEDITOR.replace("ncontent");
		
		//配合其它参数使用
		CKEDITOR.replace('ncontent', {
					toolbar: 'Basic',//设置基础工具栏
					uiColor: '#9AB8F3',//颜色
					language: 'zh-cn',//语言
					width: '800',//宽度
					height: '200',//高度
					toolbar: 'Full'//工具栏  full  全部
		});
	</script>
	
	
	
	
</body>
</html>

SmartUpload（文件上传功能）

概述

文件上传功能
			1.组件SmartUpload实现
			2.IO流技术实现
			
			3.图片究竟上传到那个地方去？
				数据库？服务器？还是其它地方
				
				=====服务器，但是图片的路径是存储在数据库，
			
		组件SmartUpload实现
			1.该组件免费    简单实用    目前停止更新服务
			2.可以限制大小，类型  上传文件
			
		组件SmartUpload提供的类：
			1.File    保存到指定的区域去，判断是否选择文件	
				SaveAs   最终调用将图片实际的存储到服务器中
				isMissing  判断是否选中了文件
			2.Files类  过滤掉   
			3.SmartUpload类   一把钥匙，开启文件上传的钥匙
				initialize  初始化激活的
				upload  上传的方法  将文件暂时上传到服务器的内存上
				
				setAllowFilesList  设置允许上传的文件类型
				setDeniedFilesList 设置不允许上传的文件类型
				setMaxFileSize  设置每个文件的最大长度
				setTotalMaxFileSIze 设置总文件的最大长度
				
		使用SmartUpad组件实现文件上传的流程：
			1.准备工作
				（1）将组件的jar依赖导入lib文件内
				（2）在form表单上设置2个必要属性(表单一旦涉及到文件上传)
					enctype属性   multipart/form-data
					method   post
			2.在do处理页面中通过组件提供的类实现文件上传即可
				（1）实例化组件SmartUpload  拿到钥匙
				（2）调用初始化的方法initialize  来激活该组件
				（3）可以省略：设置对应限制方法
				（4）调用upload方法暂时将文件上传到服务器内存上
				（5）根据所选中的文件得到对应的文件名称拼接到指定的路径下进行服务器的本地保存
					File类中的方法

演示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	 <form enctype="multipart/form-data" action = "doFileUpload.jsp" method = "post">
	 	账户： <input type = "text" name = "username"/>
	 	<input type = "file" name = "myFile"/>
	 	<input type = "submit" value = "文件上传"/>
	 
	 </form>
	 
 
</body>
</html>

中转界面

<%@page import="com.jspsmart.upload.Request"%>
<%@page import="com.jspsmart.upload.File"%>
<%@page import="com.jspsmart.upload.SmartUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<%

	/* String username = request.getParameter("username");
	out.println("username = "+username);
 */


	/*
	（1）实例化组件SmartUpload  拿到钥匙
	（2）调用初始化的方法initialize  来激活该组件
	（3）可以省略：设置对应限制方法
	（4）调用upload方法暂时将文件上传到服务器内存上
	（5）根据所选中的文件得到对应的文件名称拼接到指定的路径下进行服务器的本地保存
		File类中的方法
	*/
	//（1）实例化组件SmartUpload  拿到钥匙
	SmartUpload su = new SmartUpload();
	//（2）调用初始化的方法initialize  来激活该组件
	//pagecontext 内置对象之一    当前页面  
	su.initialize(pageContext);
	//（3）可以省略：设置对应限制方法
	su.setAllowedFilesList("jpg,png,jpeg");//允许上传的文件类型
	su.setDeniedFilesList("doc,avi,mp4");//禁止上传的文件类型
	//大小限制    单位 字节
	//设置组件上传文件时的编码格式
	su.setCharset("utf-8");
	
	//（4）调用upload方法暂时将文件上传到服务器内存上
	su.upload();
	
	//（5）根据所选中的文件得到对应的文件名称拼接到指定的路径下进行服务器的本地保存
	//File类中的方法
	
	//获取上传到服务器内存上的文件（第一个）
	File file = su.getFiles().getFile(0);
	
	//定义一个变量存储当前服务器中项目的路径
	String path = "upload//";
	//根据pageContext获取当前项目的根目录
	//String path = pageContext.getRequest().getServletContext().getContextPath();
	System.out.println(path);
	//判断  看你有没有选中
	if(!file.isMissing()){//选中文件了
		//想要将图片保存到服务器本地中
		path+=file.getFileName();
		//out.println(file.getFilePathName());//获取名字
	}
	
	//out.println(path);
	//最终保存到服务器本地中
	file.saveAs(path,SmartUpload.SAVE_AUTO);
	
	
	
	/*
		问题：  通过request内置对象获取输入项  null
		
		该表单上有文件上传
		
		必须要通过smartupload组件中提供的request对象获取
	
	*/
	
	
	//根据smartupload组件获取request对象
	Request req = su.getRequest();
	
	//获取用户名
	String username = req.getParameter("username");
	
	out.println("username = "+username);
	

	
%>

案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>文件上传演示</h1>
 <hr/>
<form enctype="multipart/form-data" action="doFileDemo.jsp" method = "post">
	头像: <input type = "file" name = "nfile" id = "myFile"/>
	<input type = "submit" value = "提交"/>
	<img id = "sb"/>
</form>
	 
	 <script type="text/javascript">
	 	document.getElementById("myFile").onchange = function(){
	 		var fil = this.files;
	        for (var i = 0; i < fil.length; i++) {
	            reads(fil[i]);
	        }

	 	};
	 	function reads(fil){
	 	    var reader = new FileReader();
	 	    reader.readAsDataURL(fil);
	 	    reader.onload = function()
	 	    {                         
	 	    	document.getElementById("sb").src = reader.result;
	 	    };
	 	}
	 
	 </script>

第五天537

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWEB（CKeditor&SmartUpload）

目录CKeditor（富文本）概述：演示SmartUpload（文件上传功能）概述演示中转界面案例CKeditor（富文本）概述：步骤： 1.进入CKeditor官网下载（Full版本） 2.将下载的文件解压后复制到webContent根目录下 3.将指定的JSP页面中通过script标签引入插件js文件 4.找到页面中指定的textarea标签设置name属性和id属性 5.编写脚本（JS），通过CKEDITO
复制链接

扫一扫