CakePHP3で画像ファイル選択時にプレビュー表示したい

今回は初学者として結構悩んだ部分です。

画像ファイルのアップロードってありますよね。

あの時に選択した画像をプレビュー表示したいときってあります。

ただまだDBに保存していない値を表示するって、よく考えると無理じゃないですか？

そう思っていましたが、jQueryを使うことで実現できたので、それを記します。

厳密にはCakePHP3は関係ないのですが、CakePHPを使っていて悩んだのであえてそう書いてます。

まずはjQuery本体をダウンロードしてwebrootに格納
jQueryのプレビュー表示機能をダウンロードする
ビューテンプレートでjQueryのコードを埋め込む
ビューテンプレートでjsファイルを読み込む
終わりに

【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7

まずはjQuery本体をダウンロードしてwebrootに格納

まずはjQuery本体を落とすところからです。

Download jQuery | jQuery

上記がダウンロードページです。

その中の「Download the compressed, production jQuery 3.5.1」（バージョン数は変わります）を2本指クリック（右クリック）して、「リンク先を別名で保存」してください。

そこで保存先はCakePHPの「webroot」の中の「js」ディレクトリです。

ここに入れないと、この後でめんどくさくなります。

jQueryのプレビュー表示機能をダウンロードする

「jquery.uploadThumbs.js」をまた2本指クリック（右クリック）して、「リンク先を別名で保存」してください。

また保存先はCakePHPの「webroot」の中の「js」ディレクトリです。

ビューテンプレートでjQueryのコードを埋め込む

これでいよいよコードを埋め込みます。

先ほどのjQuery Upload Thumbs - 画像アップロード前にプレビューを表示させる jQueryプラグイン - Dekasu.netをもう一度見ていただきます。

JavaScriptタブを選択していただき、というコードが出てきます。

これを埋め込みたいページ（ビューテンプレート）のbodyの一番下に書き込みます。

ビューテンプレートは人それぞれですが、こんなかんじになると思います。

<body>

（中略）

<script>
$(function() {
    // jQuery Upload Thumbs 
    $('form input:file').uploadThumbs({
        position : 0,      // 0:before, 1:after, 2:parent.prepend, 3:parent.append,
                           // any: arbitrarily jquery selector
        imgbreak : true    // append <br> after thumbnail images
    });
});
</script>
</body>

こんなかんじで一番下に記述してください。

一番最後に読み込まれるようになるからだそうです。

ビューテンプレートでjsファイルを読み込む

また先ほどダウンロードした2つのファイルの読み込みを忘れてはいけません。

順番前後しましたが、ビューテンプレートの一番上にこれを書きます。

<?= $this->Html->script('jquery-3.5.1.min') ?>
<?= $this->Html->script('jquery.uploadThumbs') ?>

バージョンはそれぞれ変えてください。

これで画像ファイル選択すると、プレビューが表示されるようになります。

「画像の位置を変えたい」「2枚表示したい」などの場合は先ほどのサイトを参考にしてみてください。

終わりに

以上となります。

自分のサービスは画像主体なので、これが役立ちました。

ユーザーが誤った画像を上げてしまうのは避けたかったからです。

これ以外にもjQueryは頻繁に使うので、操作を覚えておいた方がいいと思います。

ありがとうございました。