首页 > 解决方案 > 当 postAcceptor.php 中使用 $_POST['imageDIR'] 时,tinyMCE 图像上传到目录失败

问题描述

tinyMCE 和 javascript 有点新。想了解为什么当我尝试使用 php $_POST[] 超全局引用目录名称时,tinyMCE 站点提供的 php 图片上传程序不起作用。

$_POST['imageDIR']是添加到 tinyMCE 文本区域时存储图像的目录。它在我使用时有效$imageFolder = "images3/";- 图像存储在该目录中。当我使用$imageFolder = $_POST['imagesDIR'];$_POST 值设置在另一个文件(例如'images45/')中时,不会创建目录,并且图像作为 base64 图像字符串存储在 textarea 中。

尝试在 postAcceptor.php 脚本中回显任何内容以进行故障排除,也会导致同样的失败。

tinyMCE 配置文件如下所示(来自 tinyMCE 网站示例):

tinymce.init({
  selector: '#article',
  plugins: 'image code,autoresize',
  menubar:false,
  statusbar: false,
  toolbar: 'undo redo | link image | code',
  // enable title field in the Image dialog
  image_title: true, 
  // enable automatic uploads of images represented by blob or data URIs
  automatic_uploads: true,
  // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
  images_upload_url: 'postAcceptor.php',
  // here we add custom filepicker only to Image dialog
  file_picker_types: 'image', 
  // and here's our custom image picker
  image_advtab: true,
  file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    // Note: In modern browsers input[type="file"] is functional without 
    // even adding it to the DOM, but that might not be the case in some older
    // or quirky browsers like IE, so you might want to add it to the DOM
    // just in case, and visually hide it. And do not forget do remove it
    // once you do not need it anymore.

    input.onchange = function() {
      var file = this.files[0];

      var reader = new FileReader();
      reader.onload = function () {
        // Note: Now we need to register the blob in TinyMCEs image blob
        // registry. In the next release this part hopefully won't be
        // necessary, as we are looking to handle it internally.
        var id = 'imageID' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        // call the callback and populate the Title field with the file name
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
  }

});

postAcceptor.php 文件如下所示(也来自 tinyMCE 网站示例):

<?php
  /*******************************************************
   * Only these origins will be allowed to upload images *
   ******************************************************/
  $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

  /*********************************************
   * Change this line to set the upload folder *
   *********************************************/
  $imageFolder = "images3/"; //----WORKS!!!
  $imageFolder = $_POST['imagesDIR']; //--NO WORK!!! 
  /*********************************************/  

  if (!file_exists($imageFolder)) {
    mkdir($imageFolder, 0777, true);
}
  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
      // same-origin requests won't set an origin. If the origin is set, it must be valid.
      if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      } else {
        header("HTTP/1.1 403 Origin Denied");
        return;
      }
    }

    /*
      If your script needs to receive cookies, set images_upload_credentials : true in
      the configuration and enable the following two headers.
    */
    // header('Access-Control-Allow-Credentials: true');
    // header('P3P: CP="There is no P3P policy."');

    // Sanitize input
    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }

    // Verify extension
    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }

    // Accept upload if there was no origin, or if it is an accepted origin
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    // Respond to the successful upload with JSON.
    // Use a location key to specify the path to the saved image resource.
    // { location : '/your/uploaded/image/file'}
    echo json_encode(array('location' => $filetowrite));
  } else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
  }
?>

任何有助于解释为什么该$_POST变量导致此失败的帮助将不胜感激。关于如何做到这一点的任何建议都会有所帮助 - 我的最终目标是能够将图像保存在以文章 ID 命名的目录中,并存储在数据库中。文章 ID 根据从数据库中调用的文章而变化。我也尝试过使用该$_SESSION['imagesDIR']变量,但也没有用。

标签: phparraystinymce

解决方案


使用 $_SESSION['imageDIR'] 工作......只是忘记在文件顶部使用 session_start() !

$_POST 我认为可以用作全局数组变量,但似乎您需要使用 FORM/ACTION 方法将其传递给其他页面,并且在原始脚本之外不可用。


推荐阅读