Question

我遇到了 summernote图片上传的问题。

我的脚本看起来像这样：

<script>
 $(document).ready(function() {

var IMAGE_PATH = 'http://localhost/dist/images/';

$('.summernote').summernote({
    height: 300,
    callbacks : {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image",image);
    $.ajax ({
        data: data,
        type: "POST",
        url: "uploader.php",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            var image = IMAGE_PATH + url;
            $('.summernote').summernote('insertImage', image);
            },
            error: function(data) {
                console.log(data);
                }
        });
    }

});
</script>

和uploader.php有以下代码：

<?php
$image = $_FILES['image']['name'];
$uploaddir = 'images/';
$uploadfile = $uploaddir . basename($image);
if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) {
    echo $uploadfile;
} else {
    echo "Unable to Upload";
}
?>

图像文件已成功上传到dir＆＃39;图像＆＃39;。

但$（＆＃39; .summernote＆＃39;）。summernote（＆＃39; insertImage＆＃39;，image）;不会将上传的图像链接附加到编辑器。

我缺少什么？是的，我尝试提醒var＆＃39;图像＆＃39;它具有所需的价值。

Answer 1

你可以尝试：var IMAGE_PATH ='http://localhost/dist/'; 因为你的PHP代码：$ uploadfile =＆gt;'images / xxx.jpg'，html url使用两次图像，比如../images/images/xxx.jpg。所以summernote图片上传不起作用！谢谢！

这是我的代码

  <script>
 $(document).ready(function() {

var IMAGE_PATH = 'http://localhost:81/summernote-develop/examples/';

$('.summernote').summernote({
    height: 300,
    callbacks : {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image",image);
    $.ajax ({
        data: data,
        type: "POST",
        url: "uploader.php",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            var image = IMAGE_PATH + url;
            $('.summernote').summernote('insertImage', image);
			//console.log(image);
            },
            error: function(data) {
                console.log(data);
                }
        });
    }

});
</script>

php代码和你一样。

和代码目录：D：\ WWW \ summernote-develop \ examples \ 图像目录：D：\ WWW \ summernote-develop \ examples \ images

Answer 2

好吧，我发现了一个内置了此功能的自定义summernote.js。

我的editor-upload.php文件看起来有点像这样：

<?php
## This file is being used by 
##summer note for image upload call back.

include_once("classes/class.connection.php");
include_once("classes/class.config.php");
include_once("classes/class.query.php");
include_once("classes/class.common.php");

$comObj = new common;


if(empty($_FILES['file'])){ exit(); }

$errorImgFile = $comObj->sObj->config['site_url']."/admin/img-uploads/img_upload_error.png";

    if (getimagesize($_FILES["file"]["tmp_name"]) !== false)
    {   
        #Rename
        $randomName = $comObj->randomkeys(20);

        $thumbExt = $comObj->getExtension($_FILES['file']['name']);

        $newName = $randomName.".".$thumbExt;

        $destinationFilePath = './img-uploads/'.$newName;

        $rawlocation = '/img-uploads/'.$newName;



        if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
            echo $errorImgFile;
        }
        else{
            echo $comObj->sObj->config['site_url']."/admin".$rawlocation;
        }


    }else{
        echo $errorImgFile;
    }
?>

Summernote图片上传无效

2 个答案: