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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/327054.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自定义ClassLoader和双亲委派机制

转载自 自定义ClassLoader和双亲委派机制 ClassLoader ClassLoad:类加载器(class loader)用来加载 Java 类到 Java 虚拟机中。Java 源程序(.java 文件)在经过 Java 编译器编译之后就被转换成 Java 字节代码&#xff0…

ASP.NET Core 1.0 开发记录

ASP.NET Core 1.0 更新比较快(可能后面更新就不大了),阅读注意时间节点,这篇博文主要记录用 ASP.NET Core 1.0 开发简单应用项目的一些记录,以备查阅。 ASP.NET Core 1.0 相关 Nuget 程序包源:https://api.…

volatile 关键字

volatile是干啥用的,有什么含义和特点呢? 当一个共享变量被volatile修饰时,它就具备了“可见性”,即这个变量被一个线程修改时,这个改变会立即被其他线程知道。当一个共享变量被volatile修饰时,会禁止“指…

使用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 * 类…

深入浅出ClassLoader

转载自 深入浅出ClassLoader 你真的了解ClassLoader吗? 这篇文章翻译自zeroturnaround.com的 Do You Really Get Classloaders? ,融入和补充了笔者的一些实践、经验和样例。本文的例子比原文更加具有实际意义,文字内容也更充沛一些&#xf…

三种获取Class类型的实例的方法

通过Object类中的getClass()方法;通过静态方法Class.forName("全类名");通过类字面常量Class.class。 三种获取Class类型的实例的方法 方法1:通过Object类中的getClass()方法返回一个Class类型的实例 示例如下: Per…

使用ueditor实现多图片上传案例——Dao层(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 * 类名称&#…

微软任命LinkedIn高级副总裁为首席技术官

Kevin Scott曾是LinkedIn工程方面的高级VP,被任命为微软CTO后,Scott将全面统筹微软战略规划,以主动的姿态推进公司间合作,以最大化微软在伙伴及客户间的影响力。据了解,该职位为新创职位,为微软公司级CTO&a…

四种常见的 POST 提交数据方式对应的content-type取值

做前后端分离一般都有第3中 , 第一种 基本上jquery那年代用的了 第2种在需要传文件时用的 https://www.cnblogs.com/wushifeng/p/6707248.html 四种常见的 POST 提交数据方式对应的content-type取值 application/x-www-form-urlencoded 这应该是最常见的 POST 提…

jQuery 基础教程 (三)之jQuery的选择器

一、jQuery 选择器 (1)选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 (2)jQuery 选择器的优点: 简洁的写法 $(#id) //documnet.getElementById(id); $(p) //documnet.getEl…

用rollback()VS不用rollback()

不用rollback()表面和用了rollback()效果一样,但是不用rollback()可能导致被锁住的数据不能及时的释放(需要等事物超时释放),会影响下一次的事物操作

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

/*** */ package org.dao;/*** * * 项目名称:test_face_photo * 类名称:IBaseDaoUtil * 类描述: 共用接口 * 创建人:Mu Xiongxiong * 创建时间:2017-9-22 下午6:59:36 * 修改人:Mu Xiong…

update字段变更SpringBoot @JsonProperty的使用属性的名称序列化为另外一个名称

https://blog.csdn.net/wtb617806038/article/details/86093301 Restful 接口调用Json接收相关问题 1、背景: 在项目上使用SpringBoot为框架,调用第三方接口时,返回的参数类型,不符合标准的命名规则,需要进行处理&am…

SQL Server 2014内存优化表的使用场景

最近一个朋友找到走起君,咨询走起君内存优化表如何做高可用的问题 大家知道,内存优化表是从SQL Server 2014开始引入,可能大家对内存优化表还是比较陌生,网上也鲜有内存优化表使用场景的文章 朋友公司做的业务是跟蜂鸟配送类似的配…

jQuery 基础教程 (二)之jQuery对象与DOM对象

一、jQuery 对象 (1)jQuery 对象就是通过 jQuery 包装DOM对象后产生的对象 (2)Query 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html(); (3)j…

使用ueditor实现多图片上传案例——Dao层(IShoppingDao)

/** * 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;/** * * 项目名称&#x…

String转Double

String转Double String.format("%.1f",Double.parseDouble(r.getString(5)))

春节祝福提前到

2017 鸡 年 大 吉 HAPPY NEW YEAR 鸡年起算自二十四节气之立春,因为生肖年依附于干支纪年,而干支纪年又是干支历的纪年方法。历代官方历书(即黄历)皆如此。农历只是借用干支来纪年,和干支历是两种不同的历法&#xf…

jQuery 基础教程 (一)之jQuery的由来及简介

一、RIA技术 (1)RIA(Rich Internet Applications) 富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。 (2)常见的RIA技术 Ajax Flex Sliverlight (3)JavaScript及其框架是实现RIA的重…