【PHP】Summernote で画像をアップロードする方法2019年最新版、2018年のやり方ではアップロードできないので改めてまとめ

Summernoteに画像をアップロード

初期状態で画像をアップロードするとBase64にバイナルで保存されます。これをそのままDBに保存するのは悪手なので画像は画像ファイルに保存して文章上にはそのリンクを記述する事でDB圧迫を回避する画像アップロード方法をご紹介

【HTML/JavaScrip】

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            width: "500px",
            callbacks: {
                //画像がアップロードされた時の動作
                onImageUpload: function(files) {
                    sendFile(files[0]);
                }
            }
        });
        function sendFile(file){
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "ajax を受けるPHPのPath",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    //アップロードが成功した後の画像を書き込む処理
                    $('#summernote').summernote('insertImage',url);
                }
            });
        }
    });
</script>

最新のSummernote(2019年8月)ではアップロード時に書き込むコールバックの記述が変更になっています。
以前はコールバックを下記のように記述していましたが、現在は上記のシンプルな記述で動作します。
「 callbacks: { onImageUpload : function(files, editor, welEditable) {…」
画像をHTMLに書き込む際も以前は「success: function(url) {$(welEditable).summernote(‘editor.insertImage’, url)」と記述する必要がありましたが、現在は上記の通りシンプルに記述する方法に変更されています。

【PHP】

上記のAjaxを受けるPHPです。

<?php
if ($_FILES['file']['name']) {
    if (!$_FILES['file']['error']) {
        //自動でランダムのURLを生成して画像フォルダに保存するスクリプト
        $name = md5(rand(100, 200));
        $ext = explode('.', $_FILES['file']['name']);
        $filename = $name . '.' . $ext[1];
        $destination = '画像フォルダのPath' . $filename;
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo '画像フォルダのURL(Http)' . $filename;
    }
    else
    {
      echo  $message = 'uploading is false error:  '.$_FILES['file']['error'];
    }
}
タイトルとURLをコピーしました