使用ueditor实现多图片上传案例
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。
那么我们接下来看看UEditor是怎么实现上传多图片的,先来进行准备工作:
1.去UEditor官网下载所需要的文档以及js,下载地址:这里
2.在myeclipse里面新建一个web项目
3.将我们下载的那一大包东西直接拷打webroot里面,(为了图简便我直接放在了webroot下面了,大家可以根据自己的需要,进行分文件夹放置,操作方法大同小异)如图所示:
4.我们在进行创建数据库(我使用的是sql server):
USE [master]
GO
/****** Object: Database [ueditorDB] Script Date: 2017-09-30 23:52:03 ******/
CREATE DATABASE [ueditorDB]CONTAINMENT = NONEON PRIMARY
( NAME = N'ueditorDB', FILENAME = N'E:\DB\ueditorDB.mdf' , SIZE = 5120KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )LOG ON
( NAME = N'ueditorDB_log', FILENAME = N'E:\DB\ueditorDB_log.ldf' , SIZE = 2048KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [ueditorDB] SET COMPATIBILITY_LEVEL = 110
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [ueditorDB].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO
ALTER DATABASE [ueditorDB] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [ueditorDB] SET ANSI_NULLS OFF
GO
ALTER DATABASE [ueditorDB] SET ANSI_PADDING OFF
GO
ALTER DATABASE [ueditorDB] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [ueditorDB] SET ARITHABORT OFF
GO
ALTER DATABASE [ueditorDB] SET AUTO_CLOSE OFF
GO
ALTER DATABASE [ueditorDB] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [ueditorDB] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [ueditorDB] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [ueditorDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [ueditorDB] SET CURSOR_DEFAULT GLOBAL
GO
ALTER DATABASE [ueditorDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [ueditorDB] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [ueditorDB] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [ueditorDB] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [ueditorDB] SET DISABLE_BROKER
GO
ALTER DATABASE [ueditorDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [ueditorDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [ueditorDB] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [ueditorDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [ueditorDB] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [ueditorDB] SET READ_COMMITTED_SNAPSHOT OFF
GO
ALTER DATABASE [ueditorDB] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [ueditorDB] SET RECOVERY FULL
GO
ALTER DATABASE [ueditorDB] SET MULTI_USER
GO
ALTER DATABASE [ueditorDB] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [ueditorDB] SET DB_CHAINING OFF
GO
ALTER DATABASE [ueditorDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO
ALTER DATABASE [ueditorDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO
EXEC sys.sp_db_vardecimal_storage_format N'ueditorDB', N'ON'
GO
USE [ueditorDB]
GO
/****** Object: Table [dbo].[Shopping] Script Date: 2017-09-30 23:52:03 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Shopping]([id] [int] NOT NULL,[name] [nvarchar](50) NULL,[picture] [varchar](max) NULL,CONSTRAINT [PK_Shopping] PRIMARY KEY CLUSTERED
([id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]GO
SET ANSI_PADDING OFF
GO
USE [master]
GO
ALTER DATABASE [ueditorDB] SET READ_WRITE
GO
5.现在我们打开config.json文件进行简单的配置一下
/* 上传图片配置项 */"imageActionName": "uploadimage", /* 执行上传图片的action名称 */"imageFieldName": "upfile", /* 提交的图片表单名称 */"imageMaxSize": 20480000, /* 上传大小限制,单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */"imageCompressEnable": true, /* 是否压缩图片,默认是true */"imageCompressBorder": 1600, /* 图片压缩最长边限制 */"imageInsertAlign": "none", /* 插入的图片浮动方式 */"imageUrlPrefix": "http://localhost:8080/test_fuwenben/", /* 图片访问路径前缀 */"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
注意imageUrlPrefix这个,上面的内容我们只需要配置一下它即可,后面的值是我们的项目名,要不然回显不了图片。
剩下的就是上源码了。
使用ueditor实现多图片上传案例——实体类(Shopping.java)
使用ueditor实现多图片上传案例——Dao层(BaseDao)
使用ueditor实现多图片上传案例——Dao层(IBaseDaoUtil)
使用ueditor实现多图片上传案例——Dao层(IShoppingDao)
使用ueditor实现多图片上传案例——DaoImpl层(BaseDaoUtilImpl)
使用ueditor实现多图片上传案例——DaoImpl层(ShoppingDaoImpl)
使用ueditor实现多图片上传案例——Service层(IShoppingService)
使用ueditor实现多图片上传案例——ServiceImpl层(ShoppingServiceImpl)
使用ueditor实现多图片上传案例——截取字符串层Util(SubString_text)
使用ueditor实现多图片上传案例——Servlet层(UploadServlet)
使用ueditor实现多图片上传案例——前台数据层(Index.jsp)
欢迎大家多多指教,如有不足,请联系本人!!!
使用ueditor实现多图片上传案例相关推荐
- 使用ueditor实现多图片上传案例——截取字符串层Util(SubString_text)
/** * @Title: ConfigManager.java * @Package org.util * @Description: TODO该方法的主要作用: * @author A18ccms ...
- 使用ueditor实现多图片上传案例——实体类(Shopping.java)
/** * @Title: Shopping.java * @Package org.entity * @Description: TODO该方法的主要作用: * @author A18ccms A1 ...
- 使用ueditor实现多图片上传案例——ServiceImpl层(ShoppingServiceImpl)
/** * @Title: ShoppingServiceImpl.java * @Package org.service.impl * @Description: TODO该方法的主要作用: * @ ...
- 使用ueditor实现多图片上传案例——Service层(IShoppingService)
/** * @Title: IShoppingService.java * @Package org.service * @Description: TODO该方法的主要作用: * @author A ...
- 使用ueditor实现多图片上传案例——DaoImpl层(ShoppingDaoImpl)
/** * @Title: ShoppingDaoImpl.java * @Package org.dao.impl * @Description: TODO该方法的主要作用: * @author A ...
- 使用ueditor实现多图片上传案例——DaoImpl层(BaseDaoUtilImpl)
/*** */ package org.dao.impl;import java.sql.ResultSet; import java.sql.SQLException; import java.ut ...
- 使用ueditor实现多图片上传案例——Dao层(IShoppingDao)
/** * @Title: IShoppingDao.java * @Package org.dao * @Description: TODO该方法的主要作用: * @author A18ccms A ...
- 使用ueditor实现多图片上传案例——Dao层(IBaseDaoUtil)
/*** */ package org.dao;/*** * * 项目名称:test_face_photo * 类名称:IBaseDaoUtil * 类描述: 共用接口 * 创建人:Mu Xiongx ...
- 使用ueditor实现多图片上传案例——Dao层(BaseDao)
package org.dao;import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedS ...
最新文章
- match_parent和fill_parent的区别
- 吐血总结|史上最全的MySQL学习资料!!
- @RequestBody注解失效?从前端传来的数据到底需不需要@RequestBody注解?前端传输数据解析的问题?
- 基于容器的全链路运维平台实践
- Qt学习笔记之样式表
- 解决spark-shell输出日志信息过多
- 蓝桥杯2017初赛-9数算式-dfs
- 存储过程从入门到熟练(多个存储过程完整实例及调用方法)_AX
- GitHub建立个人网站(二)
- 超边际分析不能用计算机,一种基于超边际分析的分布式计算资源分配方法-Journalof.PDF...
- code4906 删数问题
- layui 动态添加的表单元素--select
- 什么是armv6和armv7
- 微信用户昵称特殊符号处理
- 搜索引擎和网站中的高级搜索技巧
- 【BZOJ3717】[PA2014]Pakowanie 状压DP
- 输入一个年份和一个月份,输出该年该月有多少天
- ibm aix_IBM AIX设备驱动程序开发
- easyexcel导出图片到具体excel具体位置并设置大小
- 微信小程序的图形验证码实现
热门文章
- 找出数组中第i小元素(时间复杂度Θ(n)--最坏情况为线性的选择算法
- Minimum Inversion Number HDU - 1394(求一个数字环的逆序对+多种解法)
- php和mysql一键安装包_iis+php+mysql一键安装教程和安装包
- 程序无法启动ALL_BUILD 拒绝访问
- 基础篇--Java IO--概览
- LOJ6053简单的函数(min_25筛)
- 【PKUSC2018】星际穿越【结论】【倍增dp】
- [BeiJing2011][bzoj2460] 元素
- P4070 [SDOI2016]生成魔咒
- Tree Constructer