Summernote 图片上传不工作(PHP)

Posted

技术标签:

【中文标题】Summernote 图片上传不工作(PHP)【英文标题】:Summernote Image Upload Not Working (PHP) 【发布时间】:2017-01-01 19:12:46 【问题描述】:

我已经尝试了在这里和其他地方找到的各种解决方案 - 充其量我将 Base64 代码插入到编辑器中(我相信这是 Summernote 的默认设置),否则我什么也得不到。

我现在尝试的解决方案来自this post。

这是我的 html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>
<body>
<div id="summernote"></div>
<script>
    $(document).ready(function() 
        $('#summernote').summernote(
            height: 200,
            onImageUpload: function(files, editor, welEditable) 
                sendFile(files[0], editor, welEditable);
            
        );
        function sendFile(file, editor, welEditable) 
            data = new FormData();
            data.append("file", file);
            $.ajax(
                data: data,
                type: "POST",
                url: "img-upload.php",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) 
                    editor.insertImage(welEditable, url);
                
            );
        
    );
</script>
</body>
</html>

img-upload.php 源码如下(域名隐藏):

<?php
if ($_FILES['file']['name']) 
    if (!$_FILES['file']['error']) 
        $name = md5(rand(100, 200));
        $ext = explode('.', $_FILES['file']['name']);
        $filename = $name . '.' . $ext[1];
        $destination = '/uploads/' . $filename; //change this directory
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo 'http://<mydomain>/uploads/' . $filename;//change this URL
    
    else
    
        echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
    

?>

看起来我对上传文件夹有写权限,有人能看出这还有什么问题吗?

【问题讨论】:

您是否启用了错误报告?你有什么错误 我在这里粘贴的代码就是一切,唯一的错误报告是在上传脚本中,因为这是从 Summernote 脚本内部调用的,错误会在哪里显示/记录? 我使用了一个警告框来测试 Summernote 正在调用 sendFile 函数,所以我知道它正在被调用,所以错误可能在 PHP 脚本中 我也尝试过这篇文章 (***.com/questions/30578916/…) 中显示的方法,但没有上传任何内容。图像添加到 Base64 中的编辑器中,就像在没有所有这些的情况下一样。 你的 ajax 是否点击了 url ?你的ajax点击后的反应是什么? 【参考方案1】:

onImageUpload 元素是一个 callbacks 元素,这是您的代码:

    $('#summernote').summernote(
        height: 200,
        callbacks: 
            onImageUpload: function(files, editor, welEditable) 
                sendFile(files[0], editor, welEditable);
                       
        
    );

【讨论】:

以上是关于Summernote 图片上传不工作(PHP)的主要内容,如果未能解决你的问题,请参考以下文章

图片上传完成后summernote编辑器不显示图片

summernote 图片上传和替代不起作用

Summernote 上传图片:onImageUpload 和 sendFile 功能不起作用

将上传的图片插入summernote编辑器

Summernote富文本编辑器-限制图片高于特定高度和宽度

summernote 上传图片到图片服务器的解决方案(springboot 成功)