图片上传不工作（Froala 编辑器）答案

【问题标题】：Image Upload Not Working (Froala Editor)图片上传不工作（Froala 编辑器）
【发布时间】：2015-03-30 00:12:27
【问题描述】：

我已经阅读Froala Help Docs 超过 10 次了。我仍然无法让它工作:(

当我在编辑器中单击上传图标并选择要上传的图像时，没有任何反应。弹出要求您选择图像的对话框，选择图像后，它会关闭，但之后页面上没有任何反应。

我的代码肯定有问题。但是，我不知道它是什么。

我的查看页面：

<textarea id="edit" name="message"> </textarea>

我的js：

 $(function() {
      $('#edit').editable({
          height: 400,
          imageUploadURL: '/assets/upload_image.php',
          imageUploadParams: {id: "edit"},
          imageUploadParams: {id: "edit"},
          placeholder: "Write something...",
          inlineMode: false
      })
  });

我的upload_image.php 文件：

    <?php
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png");

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

// Get extension.
$extension = end($temp);

// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

if ((($mime == "image/gif")
        || ($mime == "image/jpeg")
        || ($mime == "image/pjpeg")
        || ($mime == "image/x-png")
        || ($mime == "image/png"))
    && in_array($extension, $allowedExts)) {
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

    // Save file in the uploads folder.
    move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "http://localhost/assets/uploads/" . $name);

    // Generate response.
    $response = new StdClass;
    $response->link = "http://localhost/assets/uploads/" . $name;
    echo stripslashes(json_encode($response));
}

我尝试解决此问题的方法：

在upload_image.php 中，我已将上传文件夹路径（原始：http://localhost/assets/uploads/ 替换为 uploads 并在该目录中创建了一个 uploads 文件夹。仍然没有运气。

我尝试将所有文件放在同一个文件夹中，但没有成功。

非常感谢任何帮助。

【问题讨论】：

打开你的开发者工具，进入网络标签。是否发送请求？您在客户端或服务器上收到任何错误吗？
你确保 ajax 中的路径 url 正确吗？和upload_image.php 可以处理吗？在您的 upload_image.php 和 die() 中尝试 print_r(something);在顶部确保（调试）。

标签： javascript php jquery file-upload

【解决方案1】：

我遇到了同样的问题，我正在为你分享工作代码。

index.php

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/froala_editor.css">
   <style>
    body {
      text-align: center;
    }
    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }
  </style>
</head>

<body>
  <div id="editor">
    <form method="post">
      <textarea id='edit' name='edit' style="margin-top: 30px;" placeholder="Type some text">
        <h1>Textarea</h1>
        <p>The editor can also be initialized on a textarea.</p>
      </textarea>

      <input name="submit" type="submit">
    </form>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/froala_editor.min.js"></script>  
  <script type="text/javascript" src="js/plugins/image.min.js"></script>    
  <script>
      $(function() {
        $('#edit').froalaEditor({
          height: 300
        })
      });
  </script>
</body>
</html>

上传图片.php

<?php
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png");

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

// Get extension.
$extension = end($temp);

// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

/* if you want to check extension of a file, then please remove the below if condition */
/*if ((($mime == "image/gif")
|| ($mime == "image/jpeg")
|| ($mime == "image/pjpeg")
|| ($mime == "image/x-png")
|| ($mime == "image/png"))
&& in_array($extension, $allowedExts)) {*/
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

    // Save file in the uploads folder.
    move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/" . $name);

    // Generate response.
    $response = new StdClass;
    $response->link = "http://localhost/test/editor-3/html/uploads/" . $name;
    echo stripslashes(json_encode($response));
//}
?>

现在打开包含的 javascript 文件 image.min.js 并找到 imageUploadURL 参数并将其更改为 upload_image.php 文件的 url，在我的情况下，它是：

imageUploadURL: "http://localhost/test/editor-3/html/upload_image.php",

【讨论】：

【解决方案2】：

我将在这里添加一个答案，因为 Froala 的文档很糟糕。我在图像和文件上传方面遇到了多个问题，并且花了很多时间疯狂，直到几周后我终于解决了这个问题，并希望这可以帮助其他人。

第一

fileAllowedTypes: ['*']

documentation

以下 Froala 指定此选项将允许上传任何文件类型...错误。 Froala 没有告诉您的是，为了能够上传任何文件类型，您必须指定文件的扩展名以及 MIME 类型。如果您不忽略此选项，它将无法正常工作。它只允许 PDF 和 TXT。

做什么

当您下载 Froala SDK 时，您需要前往

wysiwyg-editor-php-sdk-master/lib/FroalaEditor/File.php //for File upload

和

wysiwyg-editor-php-sdk-master/lib/FroalaEditor/Image.php //for Image upload

在这些文件中，您会看到类似

'allowedExts' => array('zip', 'txt', 'pdf'),
'allowedMimeTypes' => array(
      'text/plain',
      'application/pdf',
      'application/zip'
)

您需要在此处添加您希望允许的扩展和 MIME 类型。 您必须同时指定文件的扩展名和 MIME 类型。

如果您在查找特定文件的 MIME 类型时遇到问题，请使用 this site。

我猜这可能也适用于其他语言，或者至少是类似的解决方案，但我可以为 php 确认这一点

希望这对将来的人有所帮助。

【讨论】：