使用ueditor实现多图片上传案例 |
您所在的位置：网站首页 › 文件上传协议 › 使用ueditor实现多图片上传案例 |
使用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 GO5.现在我们打开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 prams) throws ClassNotFoundException, SQLException{ int rel = 0; con = getConnection(); ps = con.prepareStatement(sql); if(prams!=null){ for (int i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |