summernote js上传图片 [英] summernote js upload image

问题描述

我正在使用summernote版本0.8.1（当前）。

I'm using summernote version 0.8.1 (current).

它正在运行。但有一件事我很挣扎。插入图像，而不是放入base64 dataURL，我想将图像上传到服务器并在图像数据库中插入图像URL。这是我的代码：

It's working. But 1 thing I struggle with. Inserting an image, rather than putting base64 dataURL, I want to upload the image to the server and insert the image URL in the database. This is my code:

<script>
$(document).ready(function() {
$('#summernote').summernote({
    lang: 'fr-FR',
    height: 300,
    toolbar : [
        ['style',['bold','italic','underline','clear']],
        ['font',['fontsize']],
        ['color',['color']],
        ['para',['ul','ol','paragraph']],
        ['link',['link']],
        ['picture',['picture']]
    ],
    onImageUpload: function(files, editor, welEditable) {
        for (var i = files.lenght - 1; i >= 0; i--) {
        sendFile(files[i], this);
        }
    }
});

function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file',file);
    $.ajax ({
        data: form_data,
        type: "POST",
        url: "../up.php",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            $(el).summernote('editor.insertImage',url);
            }
        })
    }

});
    </script>

我测试了脚本up.php，它的作用是更改文件名并返回图像的url的形式为../photos/mypicture.jpg。

I have tested the script up.php and what that does is changing the file name and returning the image's url in the form "../photos/mypicture.jpg".

上面代码的问题是，甚至似乎都没有调用..up.php。我在Firefox开发工具中运行它并且没有错误或警告。

The problem with the above code is that the ..up.php doesn't even seem to be called. I ran this in Firefox development tools and got no errors or warnings.

推荐答案

我得到了它的工作。这是我的代码。使用summernote 0.8.1，即当前版本。

I got it working. Here's my code. Using summernote 0.8.1, i.e. current version.

<script>

$(document).ready(function() {

var IMAGE_PATH = 'http://www.path/to/document_root/';
                  // the exact folder in the document_root
                  // will be provided by php script below

$('#summernote').summernote({
    lang: 'fr-FR', // <= nobody is perfect :)
    height: 300,
    toolbar : [
        ['style',['bold','italic','underline','clear']],
        ['font',['fontsize']],
        ['color',['color']],
        ['para',['ul','ol','paragraph']],
        ['link',['link']],
        ['picture',['picture']]
    ],
    callbacks : {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image",image);
    $.ajax ({
        data: data,
        type: "POST",
        url: "../up.php",// this file uploads the picture and 
                         // returns a chain containing the path
        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>

这里我的up.php：

Here my up.php :

<?php
require('admchir/nettoie.php'); 
      // nettoie.php removes the French special chars and spaces
$image = nettoie($_FILES['image']['name']);
$uploaddir = 'photos/';
      // that's the directory in the document_root where I put pics
$uploadfile = $uploaddir . basename($image);
if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) {
    echo$uploadfile;
} else {
    echo "Lo kol kakh tov..."; // <= nobody is perfect :)
}
?>

从互联网上寻找这个，我觉得summernote在不同版本之间发生了很大的变化，但没有找到当前版本的完整工作示例。希望这有助于某人。

From looking for this on the internet, I got the impression that summernote changed a lot between the various versions, but didn't find a full working example of the current version. Hope this helps someone.

这篇关于summernote js上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！