【保存版】JavaScript、jQuery、AJAXを駆使したFormDataを使ったファイルアップロードの実装方法
2024-05-14
FormDataを使ったAJAXファイルアップロード：JavaScript、jQuery、AJAXの融合
このガイドでは、JavaScript、jQuery、AJAXを組み合わせて、FormDataオブジェクトを使ってファイルをアップロードする方法を詳しく説明します。
ステップ１：ファイル選択とFormDataの作成
- HTMLフォームに
<input type="file">要素を追加します。これは、ユーザーがファイルをアップロードする際に使用するファイル選択フィールドになります。 - jQueryを使用して、ファイル選択イベントを処理します。このイベントハンドラ内で、以下の処理を行います。
- 選択されたファイルを取得します。
- 新しい
FormDataオブジェクトを作成します。 append()メソッドを使用して、ファイルオブジェクトをFormDataオブジェクトにkeyとvalueのペアとして追加します。
<input type="file" id="fileInput">
$(document).ready(function() {
$("#fileInput").change(function() {
var file = this.files[0];
var formData = new FormData();
formData.append("file", file);
// ... 次の手順へ進む
});
});
ステップ２：AJAXリクエストの送信
$.ajax()メソッドを使用して、AJAXリクエストを送信します。このリクエストには、以下の設定が必要です。url: アップロード先のサーバーサイドスクリプトのURLmethod: "POST" (これは、ファイルをアップロードする際に一般的に使用されるHTTPメソッドです)data: 作成したFormDataオブジェクトprocessData:falseに設定します。これは、jQueryがFormDataオブジェクトを自動的に処理しないようにするためです。
$.ajax({
url: "/upload.php",
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data) {
// アップロード成功時の処理
console.log("アップロード成功！");
},
error: function(error) {
// アップロード失敗時の処理
console.error("アップロード失敗！");
}
});
ステップ３：サーバーサイドの処理
- サーバーサイドスクリプトで、アップロードされたファイルを取得します。これは、通常、
$_FILESスーパーグローバル変数を使用して行われます。 - スクリプトを使用して、アップロードされたファイルを処理し、保存します。
<?php
// アップロードされたファイルを取得
$file = $_FILES["file"];
// ファイルを処理および保存
if ($file["error"] == UPLOAD_ERR_OK) {
$fileName = $file["name"];
$tmpName = $file["tmp_name"];
$fileSize = $file["size"];
$fileType = $file["type"];
// ファイルを保存
move_uploaded_file($tmpName, "uploads/" . $fileName);
// 成功メッセージを表示
echo "アップロード成功！";
} else {
// エラーメッセージを表示
echo "アップロード失敗！";
}
補足
- この例では、jQueryを使用していますが、Vanilla JavaScriptでも同様の手順を実行できます。
- この例では、PHPを使用していますが、他のサーバーサイド言語でも同様の手順を実行できます。
- セキュリティ上の理由から、ユーザーがアップロードできるファイルの種類を制限することが重要です。
- 大容量のファイルをアップロードする場合は、プログレスバーなどのユーザーインターフェース要素を追加することを検討してください。
FormDataを使ったAJAXファイルアップロード：サンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FormDataを使ったAJAXファイルアップロード</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>ファイルアップロード</h1>
<input type="file" id="fileInput">
<button id="uploadButton">アップロード</button>
<script>
$(document).ready(function() {
$("#uploadButton").click(function() {
var file = $("#fileInput")[0].files[0];
var formData = new FormData();
formData.append("file", file);
$.ajax({
url: "upload.php",
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data) {
alert("アップロード成功！");
},
error: function(error) {
alert("アップロード失敗！");
}
});
});
});
</script>
</body>
</html>
PHP
<?php
// アップロードされたファイルを取得
$file = $_FILES["file"];
// ファイルのエラーチェック
if ($file["error"] == UPLOAD_ERR_OK) {
$fileName = $file["name"];
$tmpName = $file["tmp_name"];
$fileSize = $file["size"];
$fileType = $file["type"];
// ファイルを保存
move_uploaded_file($tmpName, "uploads/" . $fileName);
// 成功メッセージを表示
echo "アップロード成功！";
} else {
// エラーメッセージを表示
echo "アップロード失敗！";
}
説明
この例では、以下の処理が行われます。
- HTMLフォームには、ファイル選択フィールド (
input type="file") とアップロードボタン (button) が含まれています。 $.ajax()メソッドを使用して、AJAXリクエストを送信します。このリクエストには、以下の設定が必要です。method: "POST"processData:falseに設定します。
- サーバーサイドスクリプトで、アップロードされたファイルを取得し、
uploadsディレクトリに保存します。
実行方法
- 上記のHTMLとPHPコードをそれぞれ
index.htmlとupload.phpというファイルに保存します。 - Webサーバーを起動し、
index.htmlファイルにアクセスします。 - ファイルをを選択し、「アップロード」ボタンをクリックします。
- アップロードが成功すると、「アップロード成功！」というメッセージが表示されます。
- この例は、基本的なファイルアップロードのシナリオを示しています。より複雑な要件については、この例を基盤として拡張する必要があります。
FormDataを使ったAJAXファイルアップロード：その他の方法
jQueryを使わずに、Fetch APIを使用してFormDataを使ったAJAXファイルアップロードを実行することもできます。
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
uploadButton.addEventListener('click', async () => {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/upload.php', {
method: 'POST',
body: formData,
});
const data = await response.json();
if (data.success) {
alert('アップロード成功！');
} else {
alert('アップロード失敗！');
}
} catch (error) {
console.error(error);
}
});
プログレスバーを追加する
大容量のファイルをアップロードする場合は、ユーザーにアップロードの進捗状況を表示するために、プログレスバーを追加することができます。
<progress id="progressBar" value="0" max="100"></progress>
const progressBar = document.getElementById('progressBar');
uploadButton.addEventListener('click', async () => {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/upload.php', {
method: 'POST',
body: formData,
onprogress: (event) => {
const progress = (event.loaded / event.total) * 100;
progressBar.value = progress;
},
});
const data = await response.json();
if (data.success) {
alert('アップロード成功！');
progressBar.value = 0;
} else {
alert('アップロード失敗！');
progressBar.value = 0;
}
} catch (error) {
console.error(error);
}
});
エラー処理を改善する
より良いユーザーエクスペリエンスを提供するために、エラー処理を改善することができます。
uploadButton.addEventListener('click', async () => {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
try {
const response = await fetch('/upload.php', {
method: 'POST',
body: formData,
});
const data = await response.json();
if (response.status === 200) {
if (data.success) {
alert('アップロード成功！');
} else {
alert(data.error);
}
} else {
alert('サーバーエラーが発生しました。');
}
} catch (error) {
console.error(error);
}
});
ドラッグ&ドロップでファイルをアップロードできるようにするには、以下のコードを追加できます。
const dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', (event) => {
event.preventDefault();
dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', (event) => {
dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (event) => {
event.preventDefault();
dropzone.classList.remove('dragover');
const file = event.dataTransfer.files[0];
const formData = new FormData();
formData.append('file', file);
// ... (アップロード処理)
});
複数ファイルのアップロードに対応する
multiple 属性を input type="file" 要素に追加することで、ユーザーが一度に複数のファイルをアップロードできるようにすることができます。
<input type="file" id="fileInput" multiple>
JavaScriptコードも、選択されたすべてのファイルを処理するように更新する必要があります。
これらの方法は、FormDataを使ったAJAXファイルアップロードの基本的なバリエーションをいくつか示しています。 具体的なニーズに合わせて、これらの例をさらに拡張してカスタマイズすることができます。
javascript jquery ajax
