こんにちは!
今回は「Javascriptを使ってsubmitと同じ形式で画像ファイルをアップロードする方法」について共有したいと思います。
画像ファイルをアップロードする方法は<form>タグとsubmitボタンを用いることで実現できると思います。
しかし、バリデーションなどを追加したい場合はJavascriptから送信する必要があります。
画像ファイルはbase64を取得して送信することもできますが、今回はsubmitボタンを押したときと同様の形式で送りたいと思います。
Javascriptを使ってsubmitと同じ形式で画像ファイルをアップロードする方法
以下にサンプルコードを交えてお伝えします。
ポイント
new FormData():FormDataオブジェクトを新しく生成
<!DOCTYPE html>
<html>
<head>
<title>ファイルアップロード</title>
</head>
<body>
<h1>ファイルをアップロードしてください</h1>
<div>
<input id="file" type="file" name="file">
<button onclick="handleClick()">アップロード</button>
</div>
<script>
const handleClick = async () => {
const files = document.getElementById('file')?.files;
if (!files || files.length === 0) {
alert('ファイルが選択されていません。');
return;
}
const postData = new FormData();
postData.append('file', files[0]);
try {
const response = await fetch('http://localhost:3031/upload', {
method: 'POST',
body: postData
/* クロスオリジンの場合はヘッダーに追加するためコメント解除
headers: {
'mode': 'cors',
'credentials': 'include'
},
*/
});
const data = await response.json();
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error) {
console.log(error);
}
}
</script>
</body>
</html>
以上、お疲れさまでした〜🍵