???? 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实现多图片上传案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。