ajax 批量上传图片插件,TinyMCE多图片批量上传(Ajax)教程

需要用上插件:axupimgs

插件作者:莫若卿

支持版本:5.0.4+

支持语言:仅中文

插件版本:1.6

一、axupimgs 插件作用:

这是一个tinymce多图片批量上传插件,支持拖拽文件添加,拖拽支持白名单,自动过滤非白名单文件类型,支持全选后直接无脑拽。

注意:此插件依赖image插件,不能单独使用。默认下载的TinyMCE编辑器里也是不包含此插件的,需要单独下载。

二、axupimgs 插件下载:

TinyMCE中文网站:http://tinymce.ax-z.cn/more-plugins/axupimgs.zip

百度风盘链接:链接: https://pan.baidu.com/s/1w4RE_an7Xi8KLLAVm6kf4A 提取码: ivjj

三、axupimgs 插件使用方法:

1、将解压得到的文件夹,放到TinyMCE主目录下的plugins文件夹内。

2、前端JS代码:

以下这段JavaScript代码,images_upload_handler那段可以直接复制用,只需要改Ajax POST提交后端处理的路径即可!

tinymce.init({

selector: '#tinydemo',

plugins: "code image axupimgs",

toolbar: "code axupimgs",

images_upload_base_path: '/demo',

images_upload_handler: function (blobInfo, succFun, failFun) {

var xhr, formData;

var file = blobInfo.blob();//转化为易于理解的file对象

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.open('POST', '/demo/upimg2.php');

xhr.onload = function() {

var json;

if (xhr.status != 200) {

failFun('HTTP Error: ' + xhr.status);

return;

}

json = JSON.parse(xhr.responseText);

if (!json || typeof json.location != 'string') {

failFun('Invalid JSON: ' + xhr.responseText);

return;

}

succFun(json.location);

};

formData = new FormData();

formData.append('file', file, file.name );

xhr.send(formData);

}

});

必须参数

images_upload_handler

插件直接调用图片上传的回调参数进行上传,所以图片回调是必须写的。

可选参数

images_upload_base_path

图片回调url的相对路径,可写可不写,为兼容图片回调而设。

插件自身的参数

axupimgs_filetype

设置允许上传的图片类型,默认参数能满足大部分需求。这里只是前端判断,后端需要自行判断文件类型。

默认值:'.png,.gif,.jpg,.jpeg'

3、PHP后端处理代码:upimg2.php

这里我就不多写了,可以直接跟“TinyMCE图片上传”代码一样,毕竟都是处理单张图片,只不过这里用的是AJAX处理。同样多图上传这里返回的JSON格式也是一样的。

4、最终效果:

95ee482e47461526967e80731ba9f83e.png

总结:

由于这是一个免费插件,非常感谢作者的贡献。

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

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

相关文章

实例48:python

#题目:数字比较。 #!/usr/bin/env python -- coding:utf-8 -- def compare(num1, num2): if num1 > num2: print("%s大于%s" % (num1, num2)) elif num2 > num1: print("%s大于%s" % (num2, num1)) else: print("%s等于%s" %…

实例49:python

#题目&#xff1a;使用lambda来创建匿名函数。 #!/usr/bin/python -- coding: UTF-8 -- MAXIMUM lambda x,y : (x > y) * x (x < y) * y MINIMUM lambda x,y : (x > y) * y (x < y) * x if name ‘main’: a 10 b 20 print (‘The largar one is %d’ %…

java程序员经常使用的Intellij Idea插件

大概从去年年初开始慢慢抛弃习惯多年的eclipse&#xff0c;开始使用Intellij Idea,以下是我使用过的一些Intellij Idea插件&#xff1a; 1.lombok https://plugins.jetbrains.com/plugin/6317-lombok-plugin 支持lombok的各种注解&#xff0c;从此不用写getter setter这些 可以…

实例50:python

#题目&#xff1a;输出一个随机数。 #!/user/bin/env python #coding:utf-8 import random print (random.random()) #输入0-1之间的随机数 print (random.uniform(10,20)) #输出10-20之间的随机数 print (random.randint(10,20)) #输出10-20之间的随机整数

系统mysql数据库服务器,系统mysql数据库服务器

系统mysql数据库服务器 内容精选换一换“数据导入”章节适用于MRS 3.x及后续版本。Loader是实现MRS与外部数据源如关系型数据库、SFTP服务器、FTP服务器之间交换数据和文件的ETL工具&#xff0c;支持将数据或文件从关系型数据库或文件系统导入到MRS系统中。Loader支持如下数据导…

tableau地图城市数据_举个栗子!Tableau 技巧(156):在地图分析中创建缓冲区

缓冲区指的是一个区域&#xff0c;在地图中就是从一个位置&#xff08;或位置范围&#xff09;到特定距离内的所有位置。实际业务场景中&#xff0c;如果需要对某些范围的数据进行邻近性分析或定义搜索区域&#xff0c;例如&#xff1a;服务中心的辐射范围、物流业务的覆盖范围…

服务器与项目之间的关系,项目 服务器 和数据库的关系

项目 服务器 和数据库的关系 内容精选换一换华为云关系型数据库服务提供使用内网、公网和数据管理服务(Data Admin Service&#xff0c;简称DAS)的连接方式。VPC&#xff1a;虚拟私有云(Virtual Private Cloud&#xff0c;简称VPC)。ECS&#xff1a;弹性云服务器(Elastic Cloud…

bios设置开机双系统选择_打破专家的断言,突破微软和英特尔的封锁,惠普电脑玩转双系统...

引子&#xff1a;新电脑&#xff0c;win10系统&#xff0c;界面略显繁琐&#xff0c;开始菜单不能一步直达&#xff0c;工作效率低。况且&#xff0c;厂家说不能安装win7&#xff0c;不信邪。研究如何&#xff0c;打破专家的断言&#xff0c;突破封锁&#xff0c;安装win7。成功…

asp 判断数组等于_如何在 ASP.NET Core MVC 中处理 404 错误

译文链接&#xff1a;https://www.infoworld.com/article/3545304/how-to-handle-404-errors-in-aspnet-core-mvc.html http://asp.net core mvc 对应着 .NET Framework 中的 http://ASP.NET MVC, 前者可以跨平台&#xff0c;可扩展&#xff0c;高性能&#xff0c;不过令人惊讶…

实例51:python

#题目&#xff1a;学习使用按位与 & 。 #程序分析&#xff1a;0&00; 0&10; 1&00; 1&11。 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: a 77 b a & 3 print (‘a & b %d’ % b) b & 7 print (‘a & b %d’ % b)

asp.net core环境变量product/development设置

一&#xff1a;项目里修改环境变量 环境变量可以在launchSettings.json文件里面设置&#xff0c;也可以右键项目->属性->调试->环境变量进行设置。 这两种方式的内容是同步的&#xff0c;任何一种方式修改后&#xff0c;另外一种就会同步。只不过一个是直接修改文件&a…

win102004优化_win10 2004系统电脑出现玩命运2掉帧的问题

有一位深度技术用户喜欢一款叫命运2的游戏&#xff0c;但是他的电脑安装win10 2004系统后&#xff0c;发现玩命运2的时候&#xff0c;画面经常出现掉帧卡顿卡死等问题&#xff0c;非常影响了正常游戏。接下来深度技术小编给大家分享一下win10电脑玩命运2掉帧的详细解决方法&…

实例52:python

#题目&#xff1a;学习使用按位或 | 。 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: a 77 b a | 3 print (‘a | b is %d’ % b) b | 7 print (‘a | b is %d’ % b)

实例53:python

#学习使用按位异或 ^ #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: a 77 b a ^ 3 print (‘The a ^ 3 %d’ % b) b ^ 7 print (‘The a ^ b %d’ % b)

unity全栈开发是什么意思_unity游戏公司面试问题总结

面试大计切勿怕你说的面试官听不懂就重复解释&#xff0c;一定要言简意赅的回答。C#篇一、请简述ArrayList和List的主要区别&#xff1f;ArrayList就是一个List<Object>而已&#xff0c;泛型集合的优势就是类型安全和无装箱。二、请简述nternal的作用internal&#xff1a…

springBoot 解决前后端分离项目中跨越请求,同源策略

今天在做项目的过程&#xff0c;采用前后端分离技术的时遇到采用ajax请求无法访问后台接口&#xff0c;按F12&#xff0c;查看浏览器运行状态时&#xff0c;报如下错误 为了解决浏览的同源策略&#xff0c;就必须了解什么是同源策略。 1.什么是同源策略 同源策略(Same origin p…

轻量级锁_并发编程实战05:锁的状态

无锁、偏向锁 、轻量级锁和重量级锁这四种锁是指锁的状态&#xff0c;专门针对synchronized的。在介绍这四种锁状态之前还需要介绍一些额外的知识。首先为什么Synchronized能实现线程同步&#xff1f;在回答这个问题之前我们需要了解两个重要的概念&#xff1a;“Java对象头”、…

实例54:python

#题目&#xff1a;取一个整数a从右端开始的4〜7位。 #(1)先使a右移4位。 #(2)设置一个低4位全为1,其余全为0的数。可用(0<<4) #(3)将上面二者进行&运算。 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: a int(input(‘input a number:\n’)) b a &…

SSH隧道技术----端口转发,socket代理

原文的原始出处不详&#xff0c;本文也是在复制引用了某篇转载&#xff0c;并做了必要的整理与编辑。 本文的受众 如果你遇到了以下问题&#xff0c;那么你应该阅读这篇文章 我听说过这种技术&#xff0c;我对它很感兴趣我想在家里访问我在公司的机器&#xff08;写程序&#x…

5d4的白平衡模式_佳能5D4/5D3/6D2系列中高端单反相机和全画幅微单EOS R专题系列课程...

【相机市场谁老大&#xff1f;佳能连续18年全球可更换镜头相机市场份额第一】佳能宣布&#xff0c;从2003年到2020年佳能连续18年全球可更换镜头相机市场份额(台数)第一名&#xff0c;包括数码单反以及微单相机。2019-2020年数码相机市场的销售情况。可更换镜头相机中&#xff…