最終更新日：
公開日：
レシピ
Ajax
Fetch APIでファイルを送信する
選択したファイルをFetch APIを使ってサーバーへ送信する方法について解説します。
この記事のポイント
- 送信するファイルデータをFormDataオブジェクトにセットして、Fetch APIで指定した送信先へ送信する
- FormDataオブジェクトには複数のファイルをセットして送信することも可能
目次
Fetch APIでファイルをサーバーへ送信する
ファイル選択（type=”file”）のinput要素などで選択したファイルは、Fetch APIとFormDataオブジェクトを組み合わせると簡単にをサーバーへ送信することができます。
以下の例では、送信ボタンをクリックすると選択したファイルをFormDataオブジェクトにセットして、Fetch APIでサーバーに送信します。
HTML コード例
<form method="post" action="">
<input type="file" name="input_file">
<input type="submit" id="btn_submit" name="btn_submit" value="送信">
</form>JavaScriptのコードは以下のようになります。
ポイントになるのは赤字になっているFormDataオブジェクトを使った箇所になります。
JS コード例
window.addEventListener('DOMContentLoaded', () => {
// (1) 送信ボタンのHTMLを取得
const btn_submit = document.getElementById("btn_submit");
// (2) FormDataオブジェクトの初期化
const fd = new FormData();
btn_submit.addEventListener('click', (e)=> {
e.preventDefault();
// (3) ファイル選択のinput要素を取得
const input_file = document.querySelector('input[name=input_file]');
// (4) FormDataオブジェクトにファイルデータをセット
fd.append('uploadfile', input_file.files[0]);
// (5) フォームの入力値を送信
fetch( 'regist.php', {
method: 'POST',
body: fd
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch((error) => {
console.error(error);
});
});
});input要素に入力された値は通常はvalue属性から取得しますが、選択されたファイル情報はfiles属性から参照します。
files属性は選択されたファイルの数に関係なく配列形式になっているため、1つ目のファイルを取得するときは「files[0]」のようにすると参照することができます。
FormDataオブジェクトへのファイルのセットはappendメソッドを使います。
第1パラメータの「uploadfile」はデータのラベルになり、サーバー側で受け取ったファイルはこのラベルを使ってファイル情報を参照することができます。
複数の選択されたファイルをサーバーへ送信する
先ほどは選択するファイルが1つであることを想定していましたが、同じ方法を使って複数ファイルを送信することも可能です。
複数の選択したファイルをFormDataオブジェクトにセットする箇所だけが異なります。
まず、input要素で複数ファイルを選択できるようにmultiple属性を追加します。
HTML コード例
<form method="post" action="">
<input type="file" name="input_file" multiple>
<input type="submit" id="btn_submit" name="btn_submit" value="送信">
</form>JavaScriptのコードは以下のようになります。
ポイントになるのは赤字になっているFormDataオブジェクトを使った箇所になります。
JS コード例
window.addEventListener('DOMContentLoaded', () => {
// (1) 送信ボタンのHTMLを取得
const btn_submit = document.getElementById("btn_submit");
// (2) FormDataオブジェクトの初期化
const fd = new FormData();
btn_submit.addEventListener('click', (e)=> {
e.preventDefault();
// (3) ファイル選択のinput要素を取得
const input_file = document.querySelector('input[name=input_file]');
// (4) FormDataオブジェクトにファイルデータをセット
for(let index in input_file.files) {
fd.append('uploadfile' + index, input_file.files[index]);
}
// (5) フォームの入力値を送信
fetch( 'regist.php', {
method: 'POST',
body: fd
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch((error) => {
console.error(error);
});
});
});(4)のところで、選択されたファイルの数だけループを繰り返してFormDataオブジェクトにデータをセットしていきます。
appendメソッドの第1パラメータに指定するラベルは重複するとセットしたデータを上書きしてしまうため、必ず一意になるようにします。
以上のコード変更のみで、複数ファイルを選択したときについてもサーバーに送信することができます。