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

Question

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

快速回顾：仅当图像与index.php（即包含表单和Ajax请求的页面）位于同一文件夹中时，我才能使Summernote在文本区域中显示该图像。

注意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>

我的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。如我之前所说，该文件实际上已上传在服务器上正确的文件夹中，我什至可以将其移至另一个文件夹中或下载回去进行编辑...我的意思是... 它在那里 （不是吗？）。

但不适用于浏览器，也不适用于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）”。

另请参见基于docker的完整代码示例。

可能有多种原因导致您遇到此问题，例如，“ img /”文件夹不存在或不可写。

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

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

问题描述

1 个解决方案

解决方案1
0 2018-10-29 15:09:39

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

问题描述

1 个解决方案

解决方案1 0 2018-10-29 15:09:39

解决方案1
0 2018-10-29 15:09:39