0
点赞
收藏
分享

微信扫一扫

JavaWEB(CKeditor&SmartUpload)

柠檬果然酸 2022-04-13 阅读 66
eclipsejava

目录

富文本编辑器
    概述
        富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于 Microsoft Word 的编辑功能。
    常用的富文本编辑器
        ①ckeditor
        ②Kindeditor
        ③ueditor
        ④wangEditor
        ⑤SmartMarkUP
        ⑥Control.Editor
        ⑦EditArea
        ⑧Free Rich Text Editor

    CKeditor的使用步骤
        【步骤一】官网https://ckeditor.com/ 下载-解压-引入
        【步骤二】
    <script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        CKEDITOR.replace("ncontent");
    </script>

web文件上传与下载
    概述
        将本地文件上传到服务器端,从服务器端下载文件到本地的过程。例如目前网站需要上传头像、上传下载图片或网盘等功能都是利用文件上传下载功能实现的。
    
原理
        文件上传
            (1)客户端浏览器通过文件浏览框,选择需要上传的文件内容(其中包括文件路径及文件内容)。
            (2)客户端浏览器通过点击上传按钮,将本地文件上传到服务器端。
            (3)服务器端通过程序接收本地文件内容,并将其保存在服务器端磁盘中。

        文件下载
            (1)客户端浏览器通过点击下载按钮,将服务器端保存的文件下载到本地磁盘。
            (2)服务器端通过程序将服务器端文件响应给客户端。

    实现方式
        SmartUpload组件
        Apache CommonsFileUpload组件
        Servlet 3.0 文件上传

    SmartUpload组件使用
        核心类
            SmartUpload
                概述
                    该类完成上传下载工作。
                上传文件使用的方法
                    public final void initialize(javax.servlet.jsp.PageContext pageContext) 
    (1)执行上传下载的初始化工作,必须第一个执行。
    (2)pageContext为JSP页面内置对象(页面上下文)
                    public void upload() 
    (1)上传文件数据。对于上传操作,第一步执行initialize方法,第二步就要执行这个方法。
                    public int save(String destPathName) 
    (1)将全部上传文件保存到指定目录下,并返回保存的文件个数。
                    public int save(String destPathName,int option) 
    ** 将全部上传文件保存到指定目录下,并返回保存的文件个数。
    ** option:
        ** SAVE_PHYSICAL指示组件将文件保存到以操作系统根目录为文件根目录的目录下
        ** AVE_VIRTUAL指示组件将文件保存到以Web应用程序根目录为文件根目录的目录下
        ** SAVE_AUTO则表示由组件自动选择
                    public Files getFiles() 
    ** 取全部上传文件,以Files对象形式返回,可以利用Files类的操作方法来获得上传文件的数目等信息
                    public Request getRequest() 
    ** 取得Request对象,以便由此对象获得上传表单参数之值。
                    public void setAllowedFilesList(String allowedFilesList) 
    ** 设定允许上传带有指定扩展名的文件,当上传过程中有文件名不允许时,组件将抛出异常
                    public void setDeniedFilesList(String deniedFilesList) 
    ** 用于限制上传那些带有指定扩展名的文件。若有文件扩展名被限制,则上传时组件将抛出异常。
                    public void setMaxFileSize(long maxFileSize) 
    ** 设定每个文件允许上传的最大长度。
                    public void setTotalMaxFileSize(long totalMaxFileSize) 
    ** 设定允许上传的文件的总长度,用于限制一次性上传的数据量大小。
                下载文件常用的方法
                    public void setContentDisposition(String contentDisposition) 
    ** 将数据追加到MIME文件头的CONTENT-DISPOSITION域。jspSmartUpload组件会在返回下载的信息时自动填写MIME文件头的CONTENT-DISPOSITION域,如果用户需要添加额外信息,请用此方法。
                    downloadFile 下载文件
                        ① public void downloadFile(String sourceFilePathName) 
    ** 其中,sourceFilePathName为要下载的文件名(带目录的文件全名)
                        ② public void downloadFile(String sourceFilePathName,String contentType) 
    ** 其中,sourceFilePathName为要下载的文件名(带目录的文件全名),contentType为内容类型(MIME格式的文件类型信息,可被浏览器识别)。
                        ③ public void downloadFile(String sourceFilePathName,String contentType,String destFileName) 
    ** 其中,sourceFilePathName为要下载的文件名(带目录的文件全名),contentType为内容类型(MIME格式的文件类型信息,可被浏览器识别),destFileName为下载后默认的另存文件名。
            
Files
                概述
                    这个类表示所有上传文件的集合,通过它可以得到上传文件的数目、大小等信息。
                常用方法
                    public int getCount() 
    ** 取得上传文件的数目。
                    public File getFile(int index)。其中,index为指定位移,其值在0到getCount()-1之间。
    ** 取得指定位移处的文件对象File(这是com.jspsmart.upload.File,不是java.io.File,注意区分)。
                    public long getSize() 
    ** 取得上传文件的总长度,可用于限制一次性上传的数据量大小。
                    public Collection getCollection() 
    ** 将所有上传文件对象以Collection的形式返回,以便其它应用程序引用,浏览上传文件信息。
                    public Enumeration getEnumeration() 
    ** 将所有上传文件对象以Enumeration(枚举)的形式返回,以便其它应用程序浏览上传文件信息。

            File
                概述
                    这个类包装了一个上传文件的所有信息。通过它,可以得到上传文件的文件名、文件大小、扩展名、文件数据等信息。
                常用方法
                    public void saveAs(java.lang.String destFilePathName) 或public void saveAs(java.lang.String destFilePathName, int optionSaveAs) 
    ** destFilePathName是另存的文件名
    ** optionSaveAs
        *** SAVEAS_PHYSICAL表明以操作系统的根目录为文件根目录另存文件
        *** SAVEAS_VIRTUAL表明以Web应用程序的根目录为文件根目录另存文件
        *** SAVEAS_AUTO则表示让组件决定,当Web应用程序的根目录存在另存文件的目录时,它会选择SAVEAS_VIRTUAL,否则会选择SAVEAS_PHYSICAL
                    public boolean isMissing() 
    ** 这个方法用于判断用户是否选择了文件,也即对应的表单项是否有值。选择了文件时,它返回false。未选文件时,它返回true。
                    public String getFieldName() 
    ** 取HTML表单中对应于此上传文件的表单项的名字。
                    public String getFileName() 
    ** 取文件名(不含目录信息)
                    public String getFilePathName 
    ** 取文件全名(带目录)
                    public String getFileExt() 
    ** 取文件扩展名(后缀)
                    public int getSize() 
    ** 取文件长度(以字节计)
                    public byte getBinaryData(int index)。其中,index表示位移,其值在0到getSize()-1之间。
    ** 取文件数据中指定位移处的一个字节,用于检测文件等处理。

            Request
                概述
                    这个类的功能等同于JSP内置的对象request。只所以提供这个类,是因为对于文件上传表单,通过request对象无法获得表单项的值,必须通过jspSmartUpload组件提供的Request对象来获取。
                常用方法
                    public String getParameter(String name)。其中,name为参数的名字。
    ** 获取指定参数之值。当参数不存在时,返回值为null。

                    public String[] getParameterValues(String name)。其中,name为参数的名字。
    ** 当一个参数可以有多个值时,用此方法来取其值。它返回的是一个字符串数组。当参数不存在时,返回值为null。
                    public Enumeration getParameterNames() 
    ** 取得Request对象中所有参数的名字,用于遍历所有参数。它返回的是一个枚举型的对象

        注意事项
            (1)表单请求方式必须为POST
            (2)设置enctype="multipart/form-data",专用于文件传输
            (3)文件标签需设置name属性

一、富文本编辑器

概述

富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

常见富文本编辑器

  • ckeditor(***)

  • Kindeditor

  • ueditor

  • wangEditor

  • SmartMarkUP

  • Control.Editor

  • EditArea

  • Free Rich Text Editor

CKeditor介绍

ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字、插入图片、视频、Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛。

快速入门

2.富文本编辑器的使用CKeditor
(1)官网下载  解压
(2)解压文件复制到webContent目录下
(3)在指定的JSP页面中来引入js文件
    ckeditor.js
(4)在指定的textarea标签上设置name属性和id属性
(5)通过CKEDITOR.replace(name);
#后台:发布新闻,修改新闻
#前台:发表评论

1.进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者standed,可能会有些功能不能用)

2.解压之后得到如下的文件目录【其中核心文件是ckeditor.js(必须),配置文件是config.js(可选)】

3.解压后复制到工程的webContent目录下

4.在指定JSP页面引用CKEDITOR的JS文件并且替换TEXTAREA标签

CKEDITOR.replace()配置

config.js文件配置

二、SmartUpload插件

    [问题]图片上传是到数据库还是到服务器?
    文件路径保存到数据库中,而把文件上传到服务器【tomcat】的硬盘中。

[使用步骤]
①环境准备:使用SmartUpload组价需要在项目中引入jspsmartupload.jar文件
    --将jspsmartupload.jar添加到web-inf\lib目录下

②需要设置表单的enctype属性--设置enctype属性后表单必须以post方式提交。
    --<form enctype = "multipart/form-data" method = "post">

③jsp smartupload.jar包中的File类
    --封装了单个上传文件所包含的所有信息
    saveAS() | isMissing() | getFieldName() | getFileName()

3.文件上传
    图片上传后,图片去哪里了?-------服务器了

    技术:组件SmartUpload  IO流
    
准备事项:
    (1)导入依赖(smartUpload.jar)
        webContent目录下   手动新建lib文件夹   错误的
        webContent===web-inf==lib   正确
    (2)在文件上传标签包裹的form标签上设置2个必要属性
        enctype属性   multipart/form-data
        method属性    post
        在文件上传标签中最好设置name属性
        
do处理页面中:
1.创建组件(钥匙)
SmartUpload su = new SmartUpload();
2.初始化激活
su.init..(pageContext);
3.设置一些上传的限制方法()
su.set
4.设置组件的编码
su.setCharset("utf-8");
5.upload方法  上传到服务器内存上
su.upload();
6.根据组件中提供的file类 获取判断所选中的文件最终保存在本地服务器中
String path = "upload";

File file = su.getFiles().getFile(0);
if(!file.isMissing()){
    //获取文件名称
    file.getFileName();
}
file.saveAs(path,SmartUpload.SAVE_ATUO)

--其它输入项获取方式 通过组件提供的封装Request对象
Request req = su.getRequest();

举报

相关推荐

0 条评论