需要用上插件：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、最終效果：

總結：

由于這是一個免費插件，非常感謝作者的貢獻。

總結

以上是生活随笔為你收集整理的ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。