Javascript TinyMCE 5文件\u选取器\u要使用自定义处理程序上载的回调

我正在使用Tinymce5和PHP7

目前： 1. <代码>图像\u上传\u处理程序（工作） 按照我自己的PHP upload AJAX处理程序，我成功地将一个图像上传到我的uploads目录：

• 这将使用AJAX正确上载文件并保留正确的名称
• 它为

  图像上传\u处理程序
  使用一个函数，调用我的AJAX处理程序

2. <代码>文件\u选择器\u回调（不完整） 接下来，我得到了两个工具栏按钮（

图像

，

媒体

），在它们的对话框中显示上载按钮：

• 这适用于

  图像

  ，而不是

  媒体

• 它使用一个函数进行

  文件\u选取器\u回调

  ，以自己的方式上传

3.问题 我无法从2获取

文件\u picker\u回调。从
媒体上传
，我希望它使用我自己的AJAX上传处理程序，但我不能

使用
图像
工具上传，点击对话框中的“保存”后，将保存文件。但是，当在
媒体
工具中使用时，它根本不会上传或插入任何内容

TinyMCE提供的这个JavaScript演示似乎与TinyMCE API本身有着大量的交互。它有一个缓存和blob系统来查找TinyMCE自己上传的文件。因此，单纯的AJAX-JS知识不足以告诉我如何告诉TinyMCE使用我自己的AJAX上传PHP文件。我宁愿在
file\u picker\u callback
中覆盖TinyMCE的上传处理程序，这样我就可以使用自己的PHP上传脚本与我的应用程序的其余部分兼容

目标：
我需要一个
file\u picker\u callback
（文件上载按钮）函数，以使用我自己的AJAX上载处理程序并保留名称，就像
images\u upload\u handler
成功完成的那样


我不担心文件名和mimetype验证；我计划稍后对PHP进行清理和过滤
解决了另一个文件上传程序和TinyMCE 4解决方案不总是与TinyMCE 5一起工作的问题
是关于图像描述的，仅适用于图像；我想上传任何文件类型
我不想要任何依赖项，甚至不想要jQuery。只有香草JS


当前代码：
|upload.php：

$temp_file=$_FILES['file']['tmp_name']；
$file_path_dest='uploads/'。$\u FILES['file']['name']；
移动上传的文件（$temp\u file，$file\u path\u dest）；
$json_file_is_here=json_encode（数组（'filepath'=>$file_path_dest））；
echo$json文件在这里；

|tinyinit.js：

tinymce.init({
选择器：'textarea'，
插件：['image media imagetools'，]，
自动上传：正确，
图像\u重用\u文件名：true，
图片上传url:'upload.php'，
//来自#1.成功的AJAX上传
图像上传处理程序：函数（fileHere，success，fail）{
var ajax=new-XMLHttpRequest（）；
ajax.withCredentials=false；
open（'post'，'upload.php'）；
ajax.upload.onprogress=函数（e）{
进度（e.loaded/e.total*100）；
};
ajax.onload=function（）{
if（ajax.status==200）{
if（（！JSON.parse（ajax.responseText））
||（typeof JSON.parse（ajax.responseText.filepath！='string'））{
失败（'Invalid:
'+ajax.responseText+'
'）；
返回；
}
成功（JSON.parse（ajax.responseText.filepath）；
}否则{
失败（'上载错误：
'+ajax.status+'
'）；
返回；
}
};
var fileInfo=new FormData（）；
append（'file'，fileHere.blob（），fileHere.filename（））；
发送（fileInfo）；
},
文件\浏览器\回调\类型：“文件图像媒体”，
文件\u选择器\u类型：“文件图像媒体”，
//从#2。既不从“媒体”上传，也不使用我的上传处理程序
文件选择器回调：函数（cb、值、元）{
var input=document.createElement（'input'）；
input.setAttribute（'type'，'file'）；
input.onchange=函数（）{
var file=this.files[0]；
var reader=new FileReader（）；
reader.onload=函数（）{
var blobCache=tinymce.activeEditor.editorUpload.blobCache；
var base64=reader.result.split（'，'）[1]；
var blobInfo=blobCache.create（file.name，file，base64）；
blobCache.add（blobInfo）；
cb（blobInfo.blobUri（），{title:file.name}）；
};
reader.readAsDataURL（文件）；
};
输入。单击（）；
}
});
在您提供的配置中，#2没有任何逻辑将数据上载到服务器。您复制的Tiny文档中的代码仅用于演示目的，不允许您将文件上载到Tiny的服务器

您需要设置
文件\u选取器\u回调
回调以发送类似于
图像\u上载\u处理程序的数据
。在服务器上，您需要在响应中发送
URI
和
title
，以便满足以下要求：

cb(blobInfo.blobUri(), { title: file.name });

希望它能帮助mate，使您的
文件\u选取器\u回调
看起来像下面的代码

file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.onchange = function () {
        var file = this.files[0];
        var reader = new FileReader();
                        
        // FormData
        var fd = new FormData();
        var files = file;
        fd.append('filetype',meta.filetype);
        fd.append("file",files);

        var filename = "";

        // AJAX
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/your-endpoint');

        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success(json.location);
            filename = json.location;
        };
        xhr.send(fd);
                                                                
        reader.onload = function(e) {
            cb(filename);
        };
        reader.readAsDataURL(file);
        return
    };

    input.click();
},                 

       
 

您只是重申了我的问题，这是关于设置
文件\u选择器\u回调
以发送类似于
图像\u上载\u处理程序
的数据。考虑到我剩下的代码，该代码看起来会是什么样子？你好像知道什么；我想让你分享你的知识，到目前为止我不知道你在想什么。我看到你是新来的。其他用户可能会对您的答案投反对票，因为OP明确表示不需要任何依赖项，包括jQuery。如果你能自己将jQuery代码转换成Vanilla JS，如果它对我有效，我会相信你的回答是“正确的”。谢谢。嗨，杰西，为我最后的回答道歉。我已经将代码更改为纯javascript，它在生产服务器中对我有效。希望它在你的工作。干杯谢谢，我一定会看一看