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、最终效果:

TinyMCE多图片批量上传(Ajax)

 

总结:

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

    A+
发布日期:2021年04月29日 12:34:09  所属分类:TinyMCE编辑器
最后更新时间:2021-04-29 12:55:21
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
jQuery视频教程: 从零开始学合集
  • ¥ 39.0元
  • 市场价:39.0元
Python数据分析与机器学习实战
  • ¥ 398.0元
  • 市场价:498.0元
Python爬虫教程:零基础上手Scrapy分布爬虫
  • ¥ 388.0元
  • 市场价:388.0元
UML建模视频教程:UML系统设计与建模 精讲
  • ¥ 58.0元
  • 市场价:58.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: