使用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 = NONE ON  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%)GOALTER DATABASE [ueditorDB] SET COMPATIBILITY_LEVEL = 110GOIF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))beginEXEC [ueditorDB].[dbo].[sp_fulltext_database] @action = 'enable'endGOALTER DATABASE [ueditorDB] SET ANSI_NULL_DEFAULT OFF GOALTER DATABASE [ueditorDB] SET ANSI_NULLS OFF GOALTER DATABASE [ueditorDB] SET ANSI_PADDING OFF GOALTER DATABASE [ueditorDB] SET ANSI_WARNINGS OFF GOALTER DATABASE [ueditorDB] SET ARITHABORT OFF GOALTER DATABASE [ueditorDB] SET AUTO_CLOSE OFF GOALTER DATABASE [ueditorDB] SET AUTO_CREATE_STATISTICS ON GOALTER DATABASE [ueditorDB] SET AUTO_SHRINK OFF GOALTER DATABASE [ueditorDB] SET AUTO_UPDATE_STATISTICS ON GOALTER DATABASE [ueditorDB] SET CURSOR_CLOSE_ON_COMMIT OFF GOALTER DATABASE [ueditorDB] SET CURSOR_DEFAULT  GLOBAL GOALTER DATABASE [ueditorDB] SET CONCAT_NULL_YIELDS_NULL OFF GOALTER DATABASE [ueditorDB] SET NUMERIC_ROUNDABORT OFF GOALTER DATABASE [ueditorDB] SET QUOTED_IDENTIFIER OFF GOALTER DATABASE [ueditorDB] SET RECURSIVE_TRIGGERS OFF GOALTER DATABASE [ueditorDB] SET  DISABLE_BROKER GOALTER DATABASE [ueditorDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF GOALTER DATABASE [ueditorDB] SET DATE_CORRELATION_OPTIMIZATION OFF GOALTER DATABASE [ueditorDB] SET TRUSTWORTHY OFF GOALTER DATABASE [ueditorDB] SET ALLOW_SNAPSHOT_ISOLATION OFF GOALTER DATABASE [ueditorDB] SET PARAMETERIZATION SIMPLE GOALTER DATABASE [ueditorDB] SET READ_COMMITTED_SNAPSHOT OFF GOALTER DATABASE [ueditorDB] SET HONOR_BROKER_PRIORITY OFF GOALTER DATABASE [ueditorDB] SET RECOVERY FULL GOALTER DATABASE [ueditorDB] SET  MULTI_USER GOALTER DATABASE [ueditorDB] SET PAGE_VERIFY CHECKSUM  GOALTER DATABASE [ueditorDB] SET DB_CHAINING OFF GOALTER DATABASE [ueditorDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF ) GOALTER DATABASE [ueditorDB] SET TARGET_RECOVERY_TIME = 0 SECONDS GOEXEC sys.sp_db_vardecimal_storage_format N'ueditorDB', N'ON'GOUSE [ueditorDB]GO/****** Object:  Table [dbo].[Shopping]    Script Date: 2017-09-30 23:52:03 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE 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]GOSET ANSI_PADDING OFFGOUSE [master]GOALTER 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）

    欢迎大家多多指教，如有不足，请联系本人！！！