目录
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>