JAVAWeb富文本编辑器&文件上传操作

Hilo Everybody wellcome to my channel！

今天Lion带大家来学习JAVAWeb的富文本编辑器&文件上传操作（JAVAWeb06）

连更赎罪！！！

---

一、在JavaWeb如何使用插件Ckeditor富文本编辑器？

1.1什么是富文本编辑器？

        富文本编辑器通俗理解其实就是一种文本框的样式，能够使我们在网页文本框中编辑文字时提高体验感。

1.1 如何使用插件Ckeditor富文本编辑器？

步骤1：去官方网站下载文件；【百度网搜索Ckeditor进入官网】

步骤2： 点击Documentation【文档】学习安装并解压；

步骤3：把整个文件夹复制粘贴到项目中；

步骤4：把ckeditor.js引用到到需要运用文本框的那个页面；

<!-- 引入ckeditor的类库 -->
<script src="../ckeditor/ckeditor.js" type=""></script>

步骤5： 在原来的文本框位置下面执行替换代码就欧克啦；

注：文本框的name值必须与其替换的值保持一致！

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

---

二、在JavaWeb如何使用Smartupload进行文件上传；

2.1 如何使用Smartupload进行文件上传？

第一个就是准备好smartupload的所需jar包；

然后把你准备好的jar包导入你的项目；

当jar包导入无误后就可以开始我们的编码步骤了！

步骤1：在你的页面上找到文件上传的form表单，

             加一句代码：enctype="multipart/form-data"；

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

注：千万不要忘记这一步！也不要写错单词！ 

步骤2：在文件选择器的位置加一句代码：multiple="multiple"；这是你实现多文件上传的前提； 

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

:步骤3：接着就去到do纯逻辑页面--->实例化--->初始化

    //实例化
    SmartUpload su = new SmartUpload();
    //初始化
    su.initialize(pageContext);

步骤4：这里可以设置一些相关的要求--->上传到服务器内存

    //设置相关要求
    su.setCharset("UTF-8");//编码方式
    su.setAllowedFilesList("jpg,png,gif,jpeg");//允许文件上传类型列表
    su.setDeniedFilesList("exe,jsp,bat");//禁止上传文件类型列表
    //上传到服务器内存
    su.upload();

步骤5：拿到所有文件--->拿到文件总数目

    //拿到所有文件
    Files fs = su.getFiles();
    //拿到上传的总数目
    int sl = fs.getCount();

步骤6：定义一个路径--->循环

    //定义一个路径
    String path = "";
    //循环
    for(int i=0;i<sl;i++){
        //依次获取每一个文件
        File file = fs.getFile(i);
        path = "images/";
        if(!file.isMissing()){//说明文件不是空的
            file.setCharset("UTF-8");//设置文件的编码方式
            path+=file.getFileName();//拼接上原有的文件名
            //上传
            file.saveAs(path, SmartUpload.SAVE_VIRTUAL);//自动找web项目的根目录
        }
    }

步骤7：最后把这个路径保存到数据库就好啦；

注：这里特别要注意，由于前面改变了form表单的提交方式，所以原来的拿值语法request.get已经失效拿不到值了，所以需要先拿到Smartupload的研发团队开发模拟的request用来获取值；

代码演示：

    //获取request对象
    Request req = su.getRequest();
    //取表单的其他值
    //接收表单提交过来的值
    String zid = req.getParameter("ntid");//ID
    String name = req.getParameter("ntitle");//标题

大家一定要按照步一步一步来执行也要注意细节处理否则文件上传功能很容易出错哦！~

---

以上就是今天的内容啦，我们今天分享了JAVAWeb的富文本编辑器&文件上传操作。希望对大家有所帮助!

到这里这次的分享就结束了，欢迎各位继续关注Lion，我们下次再见！

欢迎各位大能多多指导，Lion必将继续努力