代码之家  ›  专栏  ›  技术社区  ›  vighnesh153

当我尝试以tinymce[duplicate]格式上载图像时,服务器返回错误403

  •  0
  • vighnesh153  · 技术社区  · 7 年前

    我试图通过tinymce上传图像,但得到的“http错误:403”显示在编辑器本身。我分别从网站上获取了脚本和php页面的代码:

    tinymce.init({
          selector: "textarea",
          plugins: "link image",
    
          height:300,
          setup: function (editor) {
            editor.on('change', function () {editor.save();});
    
          },
    
        images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;
    
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'queries/editorImageUpload.php');
    
        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);
      }
    
    });

    然后在“editorimageupload.php”中,我认为问题在于$accepted_origins部分返回403错误:

    $accepted_origins = array("https://localhost", "https://77.104.172.194");
    
      $imageFolder = "pictures/Test/";
    
      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;
          }
        }

    任何有关这方面的见解都会很有帮助。

    0 回复  |  直到 8 年前
        1
  •  3
  •   aa-Ahmed-aa    8 年前

    首先,你的代码有两个问题
    -您的php代码不会将图像传输到服务器
    -在您的php代码中,您正在使用 https://localhost “而且你忘记了不安全的版本” http://localhost

    因此,解决问题的最快方法是编写有效的php代码,将图像传输到服务器并返回编辑器的图像完整路径这里是php代码

    editorimageupload.php

    <?php 
          $ds = DIRECTORY_SEPARATOR;
    
          $storeFolder = 'images';
    
          if (!empty($_FILES)) 
          {
                 $tempFile = $_FILES['file']['tmp_name'];
    
                 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
    
                 $file_name = substr(md5(rand(1, 213213212)), 1, 5) . "_" . str_replace(array('\'', '"', ' ', '`'), '_', $_FILES['file']['name']);
    
                 $targetFile =  $targetPath. $file_name;
    
                 if(move_uploaded_file($tempFile,$targetFile)){
                       die( $_SERVER['HTTP_REFERER']. $storeFolder . "/" . $file_name );
                  }else{
                       die('Fail');
                  }
    
           }
    ?>
    

    在javascript回调中,必须检查xhr.response而不是xhr.responseText,因为您将使用图像完整路径结束

    TiNYMCE代码

     tinymce.init({
          selector: "textarea",
          plugins: "link image",
          height:300,
    
          images_upload_handler: function (blobInfo, success, failure) {
                var xhr, formData;
    
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', 'editorImageUpload.php');
    
                xhr.onload = function() {
                  var json; 
    
                  if (xhr.status != 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                  }
    
                  console.log(xhr.response);
                  //your validation with the responce goes here
    
                  success(xhr.response);
                };
    
                formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
    
                xhr.send(formData);
           }
    
     });
    
    推荐文章