Question

我已经检查了许多有关Summernote的onImageUpload主题的Summernote问答，但是没有运气；所以我在这里尝试新的答案。

快速回顾：仅当图像与index.php放在同一文件夹中时，我才能使Summernote在文本区域中显示上传的图像。 ajax请求）。

jQuery是3.3.1.min;引导程序是4.1.3; Summernote是0.8.9；它们全部通过CDN以给定的顺序包含在HTML的HEAD部分中。

我的HTML / JS（index.php）：

<form name="myEditor" id="myEditor" method="post" action="show.php" enctype="multipart/form-data">
    <textarea id="summernote" name="summernote"></textarea>
    <input type="submit" />
</form>

<script type="text/javascript">                 
    $(function() {  

        $('#summernote').summernote({
            placeholder: 'Write something...',
            lang: 'it-IT',
            height: 500,
            minHeight: null,
            maxHeight: null,
            focus: true,
            callbacks: {
                onImageUpload: function(files) {
                    editor = $(this);
                    doTheUpload(files[0], editor);
                }
            }
        });

        function doTheUpload(uploadedImage, myEditor) {
            var myForm = new FormData();
            myForm.append("imageField", uploadedImage);
            $.ajax({
                url: "upload.php",
                cache: false,
                contentType: false,
                processData: false,
                data: myForm,
                type: "post",
                success: function(imageUrl) {
                    var image = $('<img>').attr('src', imageUrl);
                    $(myEditor).summernote("insertNode", image[0]);
                },
                error: function(myForm) {
                    console.log(myForm);
                }
            });
        }

    });
</script>

MY PHP（upload.php）：

$path = "";
$return_value = "";
$path = 'img/';

if ($_FILES['imageField']['name']) {

    if (!$_FILES['imageField']['error']) {

        $filename = $_FILES['imageField']['name'];
        $temp_location = $_FILES['imageField']['tmp_name'];         
        $final_destination = $path . $filename;

        if (!move_uploaded_file($temp_location, $final_destination)) {
            $return_value = $path . 'badimage.png';
        } else {
            $return_value = $final_destination;
        }

    } else {

        $return_value = "You triggered this error: " . $_FILES['imageField']['error'];

    }

}

echo $return_value;

那又如何？

因此，无论我提供给$path的“路径”如何，图像文件似乎都已正确上传到服务器上；在示例中，它是$path = 'img/'，但是可以是其他任何形式，并且无论如何都可以工作。毕竟，这是一个在工作的简单move_uploaded_file PHP函数，我对自己说。此外，“ img/”文件夹具有与基本文件夹相同的权限。

当球传回index.php时，问题就解决了。

如果将图片上传到index.php所在的文件夹中，也就是说$path = ''，就可以了；图像显示在编辑器中。

但是，如果$path与''有所不同（就像上面的示例中的'img/'一样），那么该图像不会显示在编辑器中，并且我得到一个很好的404。如前所述，该文件实际上已上传到服务器上的正确文件夹中，我什至可以将其移至另一个文件夹中或下载回去进行编辑......我的意思是... 它在那里< / em> （不是吗？）。

但不适用于浏览器，也不适用于Summernote。但是，我将浏览器指向该图像，但前提是该图像位于子文件夹中，所以我得到了404。

到目前为止，我已经进行了所有试验，但我只在Chrome的“检查->网络”中找到了一个提示：如果图像与服务器index.php位于同一文件夹中。 ..为我提供png（或我上传的任何其他图像类型）；而如果文件名前面的url中有路径，则该文件将作为text / html。

但是我在其他move_uploades_files的其他地方，不涉及Summernote，它们像魅力一样工作...

我不认识伙计，我在这里死胡同... 感谢您的任何建议。

Answer 1

您的示例实际上对我有用（稍作修改以使代码可通过php -S ...手动运行）：

<!DOCTYPE html>
<html>
<head>
    <title>Summernote upload test</title>
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    <!-- include summernote css/js -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
</head>
<body>

<form name="myEditor" id="myEditor" method="post" action="show.php" enctype="multipart/form-data">
    <textarea id="summernote" name="summernote"></textarea>
    <input type="submit" />
</form>

<script type="text/javascript">
    $(function() {

        $('#summernote').summernote({
            placeholder: 'Write something...',
            lang: 'it-IT',
            height: 500,
            minHeight: null,
            maxHeight: null,
            focus: true,
            callbacks: {
                onImageUpload: function(files) {
                    editor = $(this);
                    doTheUpload(files[0], editor);
                }
            }
        });

        function doTheUpload(uploadedImage, myEditor) {
            var myForm = new FormData();
            myForm.append("imageField", uploadedImage);
            $.ajax({
                url: "upload.php",
                cache: false,
                contentType: false,
                processData: false,
                data: myForm,
                type: "post",
                success: function(imageUrl) {
                    var image = $('<img>').attr('src', imageUrl);
                    $(myEditor).summernote("insertNode", image[0]);
                },
                error: function(myForm) {
                    console.log(myForm);
                }
            });
        }

    });
</script>
</body>

还有upload.php：

<?php
$path = "";
$return_value = "";
$path = 'img/';

if (!file_exists($path)) {
    mkdir($path);
}

if ($_FILES['imageField']['name']) {

    if (!$_FILES['imageField']['error']) {

        $filename = $_FILES['imageField']['name'];
        $temp_location = $_FILES['imageField']['tmp_name'];
        $final_destination = $path . $filename;

        if (!move_uploaded_file($temp_location, $final_destination)) {
            $return_value = $path . 'badimage.png';
        } else {
            $return_value = $final_destination;
        }

    } else {

        $return_value = "You triggered this error: " . $_FILES['imageField']['error'];

    }

}

echo $return_value;
?>

我所做的唯一更改（除了将脚本导入添加到index.php文件中和将php标签添加到upload.php之外）是“ mkdir（$ path）”。

另请参阅the full code example based on docker。

出现问题的原因可能有多种，例如，“ img /”文件夹不存在或不可写。

要调试此问题，请打开浏览器开发人员工具（chrome和firefox中为F12），并检查“ upload.php”网络请求的输出。

Summernote仅在上载到同一文件夹中的情况下在编辑器中显示图像

1 个答案: