javascript - summernote jsアップロード画像

原文 javascript php summernote

summernoteバージョン0.8.1(現在)を使用しています。

動いています。しかし、私が苦労している1つのこと。 base64 dataURLを配置するのではなく、画像を挿入して、サーバーに画像をアップロードし、データベースに画像URLを挿入します。これは私のコードです:

<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"の形式で返します。

上記のコードの問題は、.. up.phpが呼び出されていないように見えることです。これをFirefox開発ツールで実行しましたが、エラーや警告はありませんでした。
答え
うまくいきました。これが私のコードです。 summernote 0.8.1、つまり現在のバージョンを使用します。

<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:

<?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 :)
}
?>


インターネットでこれを探すと、サマーノートはさまざまなバージョン間で大きく変化したという印象を受けましたが、現在のバージョンの完全な実例は見つかりませんでした。これが誰かを助けることを願っています。
関連記事

javascript - Angularjs 2:イオン選択Ionic 2で選択した値で更新しないを選択しますか?

javascript - 光沢のあるDataTableコールバック

javascript - ShaderToyはどのようにサウンドをテクスチャにロードしますか

javascript - d3.time.formatを使用して日付をフォーマットしようとすると、JavaScriptエラー「d.getMonthは関数ではありません」が表示されます。

javascript - @bindable changeHandlerは、バインディングの更新が完了する前に起動します

javascript - Visual Studio 2015で[定義に移動]が機能しない(特にJavaScriptユーザー定義関数)

javascript - instanceofチェックは、コンストラクターを設定せずにサブクラスで機能します[複製]

javascript - テキストを含まず、<br>要素のみを含むdiv要素を選択して削除するにはどうすればよいですか?

javascript - TypeScriptからJavaScript関数を呼び出す

javascript - 「約束された」プロパティを持つオブジェクトの配列に対するPromises.all()