爆款云主机2核4G限时秒杀,88元/年起!
查看详情

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
热门活动
  • 618智算钜惠季 爆款云主机2核4G限时秒杀,88元/年起!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 首保服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
      • 文档
      • 控制中心
      • 备案
      • 管理中心

      使用ueditor实现多图片上传案例

      首页 知识中心 其他 文章详情页

      使用ueditor实现多图片上传案例

      2024-04-26 08:53:21 阅读次数:48

      ueditor,上传

      UEditor是由​​百度​​WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。​​百度​​UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。

         那么我们接下来看看UEditor是怎么实现上传多图片的,先来进行准备工作:

         1.去UEditor官网下载所需要的文档以及js,下载地址:​​这里 ​​

          2.在myeclipse里面新建一个web项目

          3.将我们下载的那一大包东西直接拷打webroot里面,(为了图简便我直接放在了webroot下面了,大家可以根据自己的需要,进行分文件夹放置,操作方法大同小异)如图所示:

      使用ueditor实现多图片上传案例

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

      剩下的就是上源码了。

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

      版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_12718584/2843822,作者:穆雄雄的博客,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

      上一篇:ContOS下Firewalld的相关命令

      下一篇:npm init vite@latest; 项目名字是abcde,选了vue-ts; cd abcde; npm install; npm run dev;浏览器访问,结果是空白的,这是怎么回事?

      相关文章

      2025-05-19 09:04:38

      js本地上传图片后实现预览与删除功能

      js本地上传图片后实现预览与删除功能

      2025-05-19 09:04:38
      js , 上传 , 删除 , 文件
      2025-04-09 09:11:38

      postman上传文件测试

      postman上传文件测试

      2025-04-09 09:11:38
      key , postman , 上传 , 文件 , 选择
      2025-04-01 10:16:07

      vue upload 上传文件之删除文件

      vue upload 上传文件之删除文件

      2025-04-01 10:16:07
      上传 , 代码 , 删除 , 图片 , 官网 , 实现 , 组件
      2025-03-25 08:08:18

      Spring boot 1.5.9升级2.3.5时上传文件大小限制失效问题的解决

      Spring boot 1.5.9升级2.3.5时上传文件大小限制失效问题的解决

      2025-03-25 08:08:18
      boot , 上传 , 升级 , 失效 , 文件 , 版本 , 配置
      2025-03-18 10:01:12

      arduino程序-面包板(电路搭建及上传程序控制led))(基础知识)

      arduino程序-面包板(电路搭建及上传程序控制led))(基础知识)

      2025-03-18 10:01:12
      led , 上传 , 引脚 , 搭建 , 电路
      2025-03-10 09:50:40

      react+ipfs上传文件数据及相关配置(react+区块链实战)

      react+ipfs上传文件数据及相关配置(react+区块链实战)

      2025-03-10 09:50:40
      react , 上传
      2025-02-19 09:04:57

      element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

      element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮

      2025-02-19 09:04:57
      上传 , 个数 , 代码 , 图片 , 如图 , 按钮
      2025-02-19 09:04:46

      Element plus 的 upload 组件实现自定义上传

      Element Plus 是一个基于 Vue 3 的 UI 组件库,提供了许多常用的 UI 组件。其中,Upload 组件用于文件上传功能。如果你想实现自定义上传逻辑,可以通过 before-upload 和 http-request 属性来实现。

      2025-02-19 09:04:46
      上传 , 属性 , 示例 , 组件 , 自定义 , 逻辑
      2025-02-14 08:25:42

      【C++二分查找 树状数组】2424. 最长上传前缀|1604

      【C++二分查找 树状数组】2424. 最长上传前缀|1604

      2025-02-14 08:25:42
      server , upload , 上传 , 前缀 , 视频
      2024-12-10 06:59:50

      Vue3上传下载的样式模版 | 附Demo(Vue3 + Java)

      Vue3上传下载的样式模版 | 附Demo(Vue3 + Java)

      2024-12-10 06:59:50
      Demo , Vue3 , 上传 , 对话框 , 组件
      查看更多
      推荐标签

      作者介绍

      天翼云小翼
      天翼云用户

      文章

      33561

      阅读量

      5254473

      查看更多

      最新文章

      js本地上传图片后实现预览与删除功能

      2025-05-19 09:04:38

      ueditor编辑器的使用

      2024-10-30 09:39:20

      ios新游上架

      2024-06-28 06:18:32

      将本地项目上传到码云

      2024-06-28 06:18:27

      js上传

      2024-05-23 09:29:21

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

      2024-04-26 08:53:21

      查看更多

      热门文章

      安卓app上架流程

      2023-05-10 06:00:35

      elementUI:Upload组件list-type: picture-card上传闪动

      2023-02-22 06:40:54

      将本地项目上传到码云

      2024-06-28 06:18:27

      文件上传 前端写法

      2023-03-30 09:32:51

      ios新游上架

      2024-06-28 06:18:32

      iTunes Connect App Video

      2023-05-19 05:51:01

      查看更多

      热门标签

      linux java python javascript 数组 前端 docker Linux vue 函数 shell git 节点 容器 示例
      查看更多

      相关产品

      弹性云主机

      随时自助获取、弹性伸缩的云服务器资源

      天翼云电脑(公众版)

      便捷、安全、高效的云电脑服务

      对象存储

      高品质、低成本的云上存储服务

      云硬盘

      为云上计算资源提供持久性块存储

      查看更多

      随机文章

      ueditor编辑器的使用

      iTunes Connect App Video

      文件上传绕过的常见方式

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

      使用ueditor实现多图片上传案例——实体类(Shopping.java)

      上传图片出现org.springframework.web.multipart.MaxUploadSizeExceededException

      • 7*24小时售后
      • 无忧退款
      • 免费备案
      • 专家服务
      售前咨询热线
      400-810-9889转1
      关注天翼云
      • 旗舰店
      • 天翼云APP
      • 天翼云微信公众号
      服务与支持
      • 备案中心
      • 售前咨询
      • 智能客服
      • 自助服务
      • 工单管理
      • 客户公告
      • 涉诈举报
      账户管理
      • 管理中心
      • 订单管理
      • 余额管理
      • 发票管理
      • 充值汇款
      • 续费管理
      快速入口
      • 天翼云旗舰店
      • 文档中心
      • 最新活动
      • 免费试用
      • 信任中心
      • 天翼云学堂
      云网生态
      • 甄选商城
      • 渠道合作
      • 云市场合作
      了解天翼云
      • 关于天翼云
      • 天翼云APP
      • 服务案例
      • 新闻资讯
      • 联系我们
      热门产品
      • 云电脑
      • 弹性云主机
      • 云电脑政企版
      • 天翼云手机
      • 云数据库
      • 对象存储
      • 云硬盘
      • Web应用防火墙
      • 服务器安全卫士
      • CDN加速
      热门推荐
      • 云服务备份
      • 边缘安全加速平台
      • 全站加速
      • 安全加速
      • 云服务器
      • 云主机
      • 智能边缘云
      • 应用编排服务
      • 微服务引擎
      • 共享流量包
      更多推荐
      • web应用防火墙
      • 密钥管理
      • 等保咨询
      • 安全专区
      • 应用运维管理
      • 云日志服务
      • 文档数据库服务
      • 云搜索服务
      • 数据湖探索
      • 数据仓库服务
      友情链接
      • 中国电信集团
      • 189邮箱
      • 天翼企业云盘
      • 天翼云盘
      ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
      公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
      • 用户协议
      • 隐私政策
      • 个人信息保护
      • 法律声明
      备案 京公网安备11010802043424号 京ICP备 2021034386号