使用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%)
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）

 /**  
* @Title: Shopping.java
* @Package org.entity
* @Description: TODO该方法的主要作用：
* @author A18ccms A18ccms_gmail_com  
* @date 2017-9-30 下午9:37:33
* @version V1.0  
*/
package org.entity;

 /**   
 *    
 * 项目名称：test_fuwenben   
 * 类名称：Shopping   
 * 类描述：   商品表的实体类
 * 创建人：Mu Xiongxiong  
 * 创建时间：2017-9-30 下午9:37:33   
 * 修改人：Mu Xiongxiong   
 * 修改时间：2017-9-30 下午9:37:33   
 * 修改备注：   
 * @version    
 *    
 */
public class Shopping {
	
	/**
	* @Fields id :该字段的意思：编号
	*/
	private int id ;
	/**
	* @Fields name :该字段的意思：名称
	*/
	private String name ;
	/**
	* @Fields picture1 :该字段的意思：图片
	*/
	private String picture ;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPicture() {
		return picture;
	}
	public void setPicture(String picture) {
		this.picture = picture;
	}
	public Shopping(int id, String name, String picture) {
		super();
		this.id = id;
		this.name = name;
		this.picture = picture;
	}
	public Shopping() {
		super();
	}

}

BaseDao类：

package org.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
/**
 * 
*    
* 项目名称：test_face_photo   
* 类名称：BaseDao   
* 类描述：   数据库连接共用类
* 创建人：Mu Xiongxiong  
* 创建时间：2017-9-22 下午6:56:18   
* 修改人：Mu Xiongxiong   
* 修改时间：2017-9-22 下午6:56:18   
* 修改备注：   
* @version    
*
 */
public class BaseDao {

	private static 			Connection 								con							=					null;

	//数据库驱动
	private static 			String 									driver						       =					"com.microsoft.sqlserver.jdbc.SQLServerDriver";
	
	//连接字符串
	private static 			String 									url							=					"jdbc:sqlserver://localhost:1433; DatabaseName=ueditorDB";
	
	//数据库用户名
	private static 			String 									user						       =					"sa";
	
	//密码
	private static	 		String 									pwd							=					"171268";
	
	//初始化PreparedStatement，编译sql语句
	private static 			PreparedStatement 						       ps							=					null;
	
	//初始化ResultSet数据集
	private static 			ResultSet 								rs							=					null;
	/**
	 * 
	* @Description: 该方法的主要作用：打开连接，连接数据库
	* @Title: getConnection
	* @param  @return
	* @param  @throws ClassNotFoundException
	* @param  @throws SQLException 设定文件  
	* @return  返回类型：Connection   
	* @throws
	 */
	public static Connection getConnection() throws ClassNotFoundException, SQLException{
		Class.forName(driver);
		if(con==null){
			con = DriverManager.getConnection(url,user,pwd);
		}
		return con;
	}
	
	/**
	 * 
	* @Description: 该方法的主要作用：增删改通用的方法
	* @Title: executeUpdate
	* @param  @param sql
	* @param  @param prams
	* @param  @return
	* @param  @throws ClassNotFoundException
	* @param  @throws SQLException 设定文件  
	* @return  返回类型：int   
	* @throws
	 */
	public static int executeUpdate(String sql,List<Object> prams) throws ClassNotFoundException, SQLException{
		int 			        rel			=			0;
						con 			= 			getConnection();
						ps			=			con.prepareStatement(sql);
		if(prams!=null){
			for (int i = 0; i <prams.size(); i++) {
				ps.setObject(i+1, prams.get(i));
			}
		}
						rel			=		ps.executeUpdate();	
		return rel;
	}
	
	/**
	 * 
	* @Description: 该方法的主要作用：查询的通用方法
	* @Title: executeQuery
	* @param  @param sql
	* @param  @param prams
	* @param  @return 设定文件  
	* @return  返回类型：ResultSet   
	* @throws
	 */
	public static ResultSet executeQuery(String sql,List<Object>prams) throws ClassNotFoundException, SQLException{
		con 		=			getConnection();
		ps 		=			con.prepareStatement(sql);
		if(prams!=null){
			for (int i = 0; i < prams.size(); i++) {
				ps.setObject(i+1, prams.get(i));
			}
		}
		rs			=		ps.executeQuery();
		return rs;
	}
	
	/**
	 * 
	* @Description: 该方法的主要作用：关闭资源
	* @Title: closeConnnection
	* @param   设定文件  
	* @return  返回类型：void   
	* @throws
	 */
	public static void closeConnnection(){
	//关闭之前先判断是否为null
		if(rs!=null){
			try {
				rs.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(ps!=null){
			try {
				ps.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		if(con!=null){
			try {
				con.close();
				con=null;
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
	}
	
	/**
	 * 
	* @Description: 该方法的主要作用：测试连接数据库与否
	* @Title: main
	* @param  @param args 设定文件  
	* @return  返回类型：void   
	* @throws
	 */
	public static void main(String[] args) {
		try {
			System.out.println(getConnection());
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
}

使用ueditor实现多图片上传案例——Dao层（IBaseDaoUtil）

/**
 * 
 */
package org.dao;

/**
 * 
*    
* 项目名称：test_face_photo   
* 类名称：IBaseDaoUtil   
* 类描述：   共用接口
* 创建人：Mu Xiongxiong  
* 创建时间：2017-9-22 下午6:59:36   
* 修改人：Mu Xiongxiong   
* 修改时间：2017-9-22 下午6:59:36   
* 修改备注：   
* @version    
*
 */
public interface IBaseDaoUtil<T> {
	
	/**
	 * 
	* @Description: 该方法的主要作用：添加数据
	* @Title: save
	* @param  @param entity    保存的对象
	* @param  @param tag		区分是Emp还是Dept
	* @param  @return 设定文件  
	* @return  返回类型：int   
	* @throws
	 */
	public int save(T entity);
}

 /**  
* @Title: IShoppingDao.java
* @Package org.dao
* @Description: TODO该方法的主要作用：
* @author A18ccms A18ccms_gmail_com  
* @date 2017-9-30 下午9:57:35
* @version V1.0  
*/
package org.dao;
 
import org.entity.Shopping;
 
 /**   
 *    
 * 项目名称：test_fuwenben   
 * 类名称：IShoppingDao   
 * 类描述：   商品接口
 * 创建人：Mu Xiongxiong  
 * 创建时间：2017-9-30 下午9:57:35   
 * 修改人：Mu Xiongxiong   
 * 修改时间：2017-9-30 下午9:57:35   
 * 修改备注：   
 * @version    
 *    
 */
public interface IShoppingDao  extends IBaseDaoUtil<Shopping>{
	
}

剩下的代码不贴出来了，大家可以自己点击链接查看源码