Tinymce 图片上传 - 保存到数据库

时间:2021-01-13 16:57:56

标签: javascript tinymce

我已将 TinyMCE 配置为使用 images_upload_urlimages_upload_handler 将所选图像发布到服务器端页面,该页面将图像保存到我服务器上的某个位置。此外,该服务器端页面还将图像的文件名保存为数据库中的记录。

然后我有另一个服务器端页面,它读取数据库并构建已上传图像的 JSON 列表。然后使用 image_list 将此 JSON 数据拉入我的 Tinymce 实例,以便我可以轻松地重复使用以前上传的图像,而不必多次重新上传同一图像。

我的tiny.init()的具体行是:

image_list: 'processes/image-list.php',
image_class_list: [
    {title: 'None', value: ''},
    {title: 'Full width image', value: 'img-responsive'}
  ],
images_upload_url: 'processes/upload-image.php',
images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;
  
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'processes/upload-image-free.asp');
  
    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);
    };
  
    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
  
    xhr.send(formData);
},
image_dimensions: false,

所有这些都按预期工作。

我还想做的是将图像的描述保存到数据库中,以便将其作为先前上传图像的 JSON 数据中的标题输出。

由于上传功能只允许从文件系统中选择图像,我无法使用上传功能: enter image description here

所以我想我可以利用图像特征/模态的替代描述字段,但这必须通过在提交图像特征/模态时触发的 JavaScript 触发事件来完成,即获取替代描述输入字段中的内容并将其发布到可以更新数据库的服务器端页面。

除非有另一种方式,否则有人知道我如何在图像特征/模态消失之前定位图像特征中“保存”按钮上的“点击”以提取替代描述并提取输入字段内容?

>

从那里我应该能够弄清楚如何将其发送到服务器端页面以更新数据库。

非常感谢

0 个答案:

没有答案