zoukankan      html  css  js  c++  java
  • 使用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:DBueditorDB.mdf' , SIZE = 5120KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
     LOG ON 
    ( NAME = N'ueditorDB_log', FILENAME = N'E:DBueditorDB_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)

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

  • 相关阅读:
    多个tomcat配置,解决冲突问题
    多态-重载和覆载
    静态成员、静态类和枚举
    重复使用类--继承和组合
    建立更可靠的OOP程序-类和成员的访问控制
    用ps画一个Gif的小房子(1)
    在h5页面上添加音乐播放
    使用Object类为实例定义方法和属性
    使用 prototype 定义方法和属性
    使用 this 关键字定义方法和属性
  • 原文地址:https://www.cnblogs.com/a1111/p/12816160.html
Copyright © 2011-2022 走看看