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)

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

  • 相关阅读:
    图片上传-下载-删除等图片管理的若干经验总结3-单一业务场景的完整解决方案
    图片上传-下载-删除等图片管理的若干经验总结2
    HDU 1195 Open the Lock
    HDU 1690 Bus System
    HDU 2647 Reward
    HDU 2680 Choose the best route
    HDU 1596 find the safest road
    POJ 1904 King's Quest
    CDOJ 889 Battle for Silver
    CDOJ 888 Absurdistan Roads
  • 原文地址:https://www.cnblogs.com/a1111/p/12816160.html
Copyright © 2011-2022 走看看