勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法

   2024/01/12  JavaScript

PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画像を送信したいというケースがあった。また、ファイルの送信が無理でも何らかの方法でその画像が見られれば良いという状況だった。画像だけPHP利用可な他所のサーバに送信する等も考えたけどとりあえずはBase64エンコードして送信することにした。以下に対応方法をメモ。

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Base64</title>
</head>
<style>
.thumb img{
    max-width: 150px;
    margin-bottom: 10px;
}
</style>
<body>

<?php
//画像が送信されてきた場合はimgタグで表示
if( $_POST['submit_img'] ){
    echo '<img src="' . $_POST['submit_img'] . '">';
}
?>

<form action="./" method="post">

    <input type="file" name="img" id="img">
    <div id="thumb" class="thumb"></div>

    <input type="hidden" name="submit_img" id="submit_img">
    <input type="submit" name="submit">

</form>

<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
    $('#img').change(function(){

        //画像取得
        const img = $('#img').prop('files')[0];
        const type = img.type;

        //画像かどうかチェック
        if( !type.match(/^image/) ){
            alert('画像を選択してください');
            $(this).val('');
            return false;
        }

        //FileReaderオブジェクトのインスタンス化
        let reader = new FileReader();

        //画像の読み込み
        reader.readAsDataURL(img);

        //読み込み失敗時
        reader.onerror = function(){
            alert('ファイル読み取りに失敗しました');
            $(this).val('');
            return false;
        }

        //画像を表示
        reader.onload = function() {
            $('#thumb').html('<img src="' + reader.result + '">');
            $('#submit_img').val(reader.result);
        }

    });
})
</script>
</body>
</html>

「<input type="file" name="img" id="img">」部分にBase64エンコードした文字列は入らないのでhiddenのところに入れてあげる必要がある。

 

所感

PHPでBase64エンコードしたい場合はそれ用の関数がある模様。いつか使うかもしれないので覚えておく。

 - JavaScript

  関連記事

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...