无法在 MVC 项目中使用 ajax 预览图像

Question

我正在制作一个博客网站，我可以使用 tinymce 的 richtext-editor 将图片上传到它，但是图片的预览没有显示在文本区域中。（尽管如果我上传图片，我可以在 blogfeed 中完美地看到它）。

我怀疑我如何将 tinymce 实现到 MVC 框架（brad traversy 在 udemy 上的框架）中存在问题。因为当我查看图像的文件路径时，它们是不同的。

"<img src="http//localhost/mywebsite/content/images/image.jpg>"。（图片来自博客）

"<img src="http//localhost/mywebsite/posts/content/images/image.jpg"。（图片来自 tinymce 编辑器）

由于某种原因，当图像加载到 tinymce 编辑器中时，控制器被包含在内。我试着弄乱应该保存图像的位置，如果我将它设置为 $imageFolder = "images/";，那么我可以在 blogfeed 中看到图像，但不能在预览中看到。如果我设置 $imageFolder = "../images/"; 那么图像可以在预览中看到，但不能在 blogfeed 中看到。

我还尝试定义一个常量路径，"define ("IMGROOT", /path/to/my/site)" 然后设置 $imageFolder = IMGROOT . 'content/images"; 但是我得到了错误 "not allowed to load local resource" 并且我不太热衷于规避这一点，因为这可能是我的博客发布后不加载本地资源的一个很好的理由。

upload.php:

<?php
    //upload images
      header('Content-Type: application/json');

      /***************************************************
        * Only these origins are 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 = "images/";

         $temp = current($_FILES);

         // 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));

upload_handler:

 tinymce.init({
    selector: '#tinymcebody',
    plugins: "image",
    images_upload_url: '<?php echo URLROOT;?>/upload.php',
    images_upload_handler: function (blobInfo, success, failure) {
    var xhr;
    var formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', '<?php echo URLROOT;?>/upload.php');
    xhr.onload = function() {
      var json;

      if (xhr.status != 200) {
        failure('HTTP Ereror: ' + 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());
    console.log(formData);
    xhr.send(formData);
  }
  });

Answer 1

我通过向 tinymce init 添加 base_url 来修复它。这样它就忽略了我从 MVC 教程中获得的路由，只加载指定文件夹中的所有图片。我还添加了 3 行，我还不完全确定它们做了什么，但它们对文件的路径做了一些事情。

请注意，我在 config.php 文件夹中定义了常量，因此 "URLROOT" 定义为 "http:localhost/mywebsite"。

  tinymce.init({
    selector: '#tinymcebody',
    plugins: "image",
    document_base_url : "<?php echo URLROOT; ?>",
    relative_urls : false,
    remove_script_host : false,
    convert_urls : false,
    images_upload_url: '<?php echo URLROOT;?>/upload.php',
    images_upload_handler: function (blobInfo, success, failure) {
    var xhr;
    var formData;

无法在 MVC 项目中使用 ajax 预览图像

cant preview image with ajax in MVC project

php

ajax

tinymce