Summernote 图片上传不起作用答案

【问题标题】：Summernote image upload not workingSummernote 图片上传不起作用
【发布时间】：2016-08-15 15:31:18
【问题描述】：

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";
}
?>

图像文件正在成功上传到目录“images”。

但是 $('.summernote').summernote('insertImage', image);不会将上传的图片链接附加到编辑器。

我错过了什么？是的，我尝试提醒 var 'image' 并且它具有所需的值。

【问题讨论】：

标签： javascript php ajax content-management-system summernote

【解决方案1】：

你可以试试 :var IMAGE_PATH = 'http://localhost/dist/'; 因为您的 php 代码：$uploadfile=>'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

【讨论】：

【解决方案2】：

使用下面的代码。它应该可以完美运行

PHP 脚本

<?php

// include Database connection file
require_once("../../resources/directories.inc.php");

if (isset($_FILES['file']['name'])) {
    if (!$_FILES['file']['error']) {
        $name = rand(100,1000).'_'.date('Ymd');
        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name.'.'.$ext;
        $destination = '../../uploads/news/'.$filename; //change this directory
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo BASE_URL.'uploads/news/'.$filename;
    } else {
        echo 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
    }
}

JS 代码

$('.summernote_editor').summernote({
    tabsize: 2,
    height: 400,
    spellCheck: true,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'italic', 'superscript', 'subscript', 'clear']],
      ['fontname', ['fontname','fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'help', 'undo', 'redo']],
    ],
    callbacks: {
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
    }
});

function sendFile(file, editor, welEditable) {
    var lib_url = '<?php echo BASE_URL."resources/library/upload_summernote.lib.php"; ?>';
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: lib_url,
        cache: false,
        processData: false,
        contentType: false,
        success: function(url) {
            var image = $('<img>').attr('src', url);
            $('.summernote_editor').summernote("insertNode", image[0]);
        }
    });
}

【讨论】：