フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
2024/01/12
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エンコードしたい場合はそれ用の関数がある模様。いつか使うかもしれないので覚えておく。
関連記事
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...