时间戳

首页 > 解决方案 > Froala / PHP - 图片上传失败（出了点问题......）

javascript - Froala / PHP - 图片上传失败（出了点问题......）

问题描述

试图让 Froala 将图像上传到 PHP 环境中的服务器。在这里完全遵循了 Froala 的示例。

但是，当我选择图像文件并提交时，我收到的反馈是一条错误消息：“出现问题。请重试”。

我已经使用了示例中的确切文件/目录名称，但显然我遗漏了一些东西。该目录是图像存放处的“上传”目录。

我已经阅读了大多数其他 Stackoverflow 评论和解决方案，尝试了其中的几个，阅读了 Froala 的信息，但仍然没有成功。

我使用的下面的代码与他们的示例非常相似。

编辑器文件：“index.php”

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <!-- Include external CSS. -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

  <!-- Include Editor style. -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <!-- Include external JS libs. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>

  <!-- Include Editor JS files. -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.5.1//js/froala_editor.pkgd.min.js"></script>
  <div class="sample">
    <h2>File upload example.</h2>
    <form>
      <textarea id="edit" name="content"></textarea>
    </form>
  </div>

  <!-- Initialize the editor. -->
  <script>
    $(function() {
      $('#edit').froalaEditor({
        // Set the file upload URL.
        imageUploadURL: '/upload_image.php',

        imageUploadParams: {
          id: 'my_editor'
        }
      })
    });
  </script>
</body>
</html>

PHP 文件：“upload_image.php”

<?php

try {
  // File Route.
  $fileRoute = "/uploads/";

  $fieldname = "file";

  // Get filename.
  $filename = explode(".", $_FILES[$fieldname]["name"]);

  // Validate uploaded files.
  // Do not use $_FILES["file"]["type"] as it can be easily forged.
  $finfo = finfo_open(FILEINFO_MIME_TYPE);

  // Get temp file name.
  $tmpName = $_FILES[$fieldname]["tmp_name"];

  // Get mime type.
  $mimeType = finfo_file($finfo, $tmpName);

  // Get extension. You must include fileinfo PHP extension.
  $extension = end($filename);

  // Allowed extensions.
  $allowedExts = array("gif", "jpeg", "jpg", "png", "svg", "blob");

  // Allowed mime types.
  $allowedMimeTypes = array("image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml");

  // Validate image.
  if (!in_array(strtolower($mimeType), $allowedMimeTypes) || !in_array(strtolower($extension), $allowedExts)) {
    throw new \Exception("File does not meet the validation.");
  }

  // Generate new random name.
  $name = sha1(microtime()) . "." . $extension;
  $fullNamePath = dirname(__FILE__) . $fileRoute . $name;

  // Check server protocol and load resources accordingly.
  if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] != "off") {
    $protocol = "https://";
  } else {
    $protocol = "http://";
  }

  // Save file in the uploads folder.
  move_uploaded_file($tmpName, $fullNamePath);

  // Generate response.
  $response = new \StdClass;
  $response->link = $protocol.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).$fileRoute . $name;

  // Send response.
  echo stripslashes(json_encode($response));

} catch (Exception $e) {
   // Send error response.
   echo $e->getMessage();
   http_response_code(404);
}
?>

标签： javascriptphpwysiwygfroala

解决方案

通过执行以下操作使其工作：

  1. 在 index.php 文件中，删除了引用“upload_image.php”的斜杠“/”。更改imageUploadURL: '/upload_image.php',为imageUploadURL: 'upload_image.php', 很难相信 Froala 网站示例中包含此错误，并且尚未更正...？

  2. 第二个问题是“finfo”功能不起作用。我通过删除分号在 php.ini 中启用了它，现在一切正常！

编辑：Froala 评论说，如果文件位于根目录中，“/”将起作用。我的不是。

推荐阅读