JavaWeb18(文件上传&富文本编辑器) | 您所在的位置:网站首页 › 在线富文本html编辑 › JavaWeb18(文件上传&富文本编辑器) |
目录 一、富文本编辑器 1.1 什么是富文本编辑器? 1.2 CKEditor 1.3 CKEditor 4的使用步骤【参考官方文档】 1.4 优化商品增加、查看、修改功能 1.5 尝试课外扩展其他富文本编辑器 二、文件上传 2.1 到底客户端的文件是上传到哪里? 2.2 SmartUpload是什么? 2.3 SmartUpload的优点 2.4 环境准备 2.5 相关类及其常用方法 2.6 初识代码 2.7 优化 一、富文本编辑器 1.1 什么是富文本编辑器?富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。 1.2 CKEditorCKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。CKEditor 完全是基于 JavaScript 开发的,因此不必在客户端进行任何安装,并且兼容各大主流浏览器。 官方网址:WYSIWYG HTML Editor with Collaborative Rich Text Editing 1.3 CKEditor 4的使用步骤【参考官方文档】下载CKEditor4,解压,导入你的项目 在所需的界面引入ckeditor.js 使用 CKEDITOR.replace()替换你界面上已经存在的文本域textarea【根据id】 1.4 优化商品增加、查看、修改功能1.5 尝试课外扩展其他富文本编辑器 1.Kindeditor 2.ueditor 3.wangEditor 4.SmartMarkUP 5.Control.Editor 6.EditArea 7.Free Rich Text Editor 二、文件上传 2.1 到底客户端的文件是上传到哪里?①上传到数据库对应表中? ②上传到服务器硬盘的某个文件夹里? 2.2 SmartUpload是什么?SmartUpload是专门用于实现文件上传及下载的免费组件 2.3 SmartUpload的优点使用简单:编写少量代码,即可完成上传下载功能 能够控制上传内容 能够控制上传文件的大小、类型 2.4 环境准备在项目中引入smartupload.jar文件,添加到WEB-INF\lib目录下 由于要上传文件,故必须设置表单的enctype属性,表示以二进制的方式提交表单 2.5 相关类及其常用方法2.5.1 SmartUpload类 用于实现文件上传和下载的操作
2.5.2 File类 封装了单个上传文件所包含的所有信息
【option】有三个选项:分别是SAVE_PHYSICAL,SAVE_VIRTUAL和SAVE_AUTO SAVE_PHYSICAL指示组件将文件保存到以操作系统根目录为文件根目录的目录下 SAVE_VIRTUAL指示组件将文件保存到以Web应用程序根目录为文件根目录的目录下 SAVE_AUTO则表示由组件自动选择 注意:对于Web程序的开发来说,最好使用SAVEAS_VIRTUAL,以便移植。 2.5.3 Files类 封装了所有上传文件的信息集合
2.6 初识代码 2.7 优化 ① 实现预览效果
② 解决文件覆盖问题 如果多个用户上传的文件名称一样,则肯定会发生覆盖的情况,为了避免这类问题,可以采用为上传文件自动命名的方式。为防止重名,可以采用时间戳+随机数的方式给文件命名:
③ 拿表单其他值
④ 多个文件上传
【注意】图片上传到服务器后,就不要再clean服务器了 |
CopyRight 2018-2019 实验室设备网 版权所有 |