Fetch APIのAjaxを使って画像をJSON形式で送信する
Fetch APIから画像ファイルを送信するときはForm Dataオブジェクトにファイルをセットして送信する方法がありますが、Base64形式に変換してJSON形式のデータとして送信することも可能です。
この方法を使うと、画像ファイルをテキスト形式にしてサーバーと受け渡しができるようになるため扱いが便利になります。
今回は画像ファイル（PNG、JPEG、GIF）を対象としていますが、画像以外の形式のファイルも送信可能です。
以下の例では、フォームのファイル選択から画像を選択するとFileReaderオブジェクトによってファイルの読み込みを開始します。
その後、読み込んだファイルをJSON形式のデータにまとめて、Fetch APIから送信します。
まずは今回使用するページのHTMLコードから紹介していきます。
HTML コード例
<form method="post" action="" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file">
</form>
<p>アップロードしたファイルをここに表示：</p>
<div id="file_area"></div>id属性「upload_file」を持つinput要素でファイルを選択したときに、Fetch APIでファイルを送信するように設定していきます。
また、レスポンスデータからJSON形式のデータを読み込み、id属性「file_area」を持つdiv要素に画像を挿入します。
続いて、JavaSriptのコードを紹介します。
大まかな流れはコメント中の(1)〜(5)の順番です。
JavaScript コード例
window.addEventListener('DOMContentLoaded', function(){
document.getElementById("upload_file").addEventListener('change', function(e){
// (1)選択したファイルを読み込み
let file_reader = new FileReader();
file_reader.readAsDataURL(e.target.files[0]);
// (2)ファイルの読み込みが完了したら実行
file_reader.addEventListener('load', function(e) {
// (3)JSONにするデータを作成（この時点ではObject形式）
let data = {
"title": "Bear",
"image": e.target.result,
"post_date": "2021-04-01"
};
// (4)Fetch APIによるデータ送信
fetch('/test.php', { // 送信先
method: 'post', // メソッド
headers: { // ヘッダー指定
'Content-Type': 'application/json'
},
body: JSON.stringify(data) // 送信データをセット（ここでJSON形式に変換）
})
.then(response => response.json())
.then(data => {
// (5)レスポンスデータ（JSON形式）からページに挿入
const file_area = document.getElementById('file_area');
const img_element = document.createElement('img');
img_element.src = data.image;
file_area.append(img_element);
});
});
});
});JavaScriptコードで実行する処理の流れを詳しく解説していきます。
まず、ページが読み込まれたタイミング（DOMContentLoaded）で、フォームのファイル選択する要素「<input type="file" id="upload_file" name="upload_file">」にイベントリスナーを設定します。
ここではイベント「change」をトリガーにしていますが、これはファイルが選択された状態になったときに発生します。
ファイルが選択されるとイベントリスナーの内側の処理が実行されていきます。
(1)ではFileReaderオブジェクトを作成し、続いてすぐにreadAsDataURLメソッドから選択したファイルをBase64形式で取得します。
選択したファイル自体はe.target.filesプロパティから参照することができます。
(1)のファイル読み込みが完了すると、(2)のイベントリスナー「load」が呼び出されて実行されます。
(2)の内側ではまず送信するデータをオブジェクト形式で用意します。
ここで選択した画像ファイルもオブジェクトのimageプロパティにこのデータは後ほどJSON形式のデータに変換します。
(4)はFetch APIによるデータ送信です。
メソッド、ヘッダー、送信データを送信先のURLに送信します。
先ほどオブジェクト形式で作ったデータは、ここでJSON.stringifyメソッドを使ってJSON形式に変換してbodyにセットします。
レスポンスデータから取得したJSON形式のデータは、(5)でimg要素のsrc属性に設定して、さらにid属性「file_area」のdiv要素に挿入して表示します。
以上が一連の流れになります。
また、今回は送信先を「test.php」としていますが、PHP側では受け取ったJSON形式のデータをhtmlspecialchars関数でサニタイズだけして、そのまま返すだけの処理を実行しています。
PHP コード例
<?php
$data = json_decode(file_get_contents('php://input'), true);
$clean = array();
if( $data ) {
foreach( $data as $key => $value ) {
$clean[$key] = htmlspecialchars( $value, ENT_QUOTES);
}
};
echo json_encode($data);
return;以上が、画像ファイルをJSON形式のデータとして送信する方法でした。