使用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 
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这个,上面的内容我们只需要配置一下它即可,后面的值是我们的项目名,要不然回显不了图片。

剩下的就是上源码了。


相关文章
|
网络协议 网络架构
计算机网络期末复习——计算大题(一)
计算机网络期末复习——计算大题(一)
698 0
计算机网络期末复习——计算大题(一)
|
XML 编解码 自然语言处理
不需要熟悉,但需要了解的libiconv库
但是很多老式的计算机还在使用当地的传统的字符编码方式。而一些程序,例如邮件程序和浏览器必须能在这些不同的用户编码之间作转换。其他的一些程序则内置支持Unicode,以顺利支持国际化的处理,但是仍然有在Unicode和其他的传统编码之间转换的需求。GNU的libiconv就是为这两种应用设计的编码转换库。
不需要熟悉,但需要了解的libiconv库
|
存储 网络协议 安全
嵌入式面试题目汇总之经典
嵌入式面试题目汇总之经典
231 1
|
5月前
|
Android开发 容器
鸿蒙开发:使用nestedScroll解决滑动冲突
nestedScroll属性的作用,主要是,用于设置嵌套滚动选项,设置前后两个方向的嵌套滚动模式,实现与父组件的滚动联动。
174 19
鸿蒙开发:使用nestedScroll解决滑动冲突
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
|
Python
Flask学习笔记(四):基于Flask网页显示图片
这篇博客文章介绍了如何使用Flask框架在网页上显示图片。
219 0
|
算法 编译器 C++
C++ 泛型编程:函数模板
C++ 泛型编程:函数模板
104 0
|
Java 应用服务中间件 对象存储
富文本编辑器Ueditor实战(二)-图片上传
本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。
1183 0
富文本编辑器Ueditor实战(二)-图片上传
|
安全
tp5使用ueditor请求后台配置项http错误,上传功能将不能正常使用!
tp5使用ueditor请求后台配置项http错误,上传功能将不能正常使用!
854 0
|
存储 开发框架 JavaScript
程序与技术分享:CKEditor与CKFinder使用
程序与技术分享:CKEditor与CKFinder使用
437 0