複数ファイルのアップロードを効率的に行うためには、UploadifyやHTML5ベースの方法が一般的です。以下では、それぞれの手法とその具体例について説明します。
Uploadifyを使用した場合、Flashベースのプラグインを利用して非同期でファイルを送信することができます。このアプローチは、ユーザビリティを向上させると同時に、サーバー側での処理をスムーズに行える利点があります。
Uploadifyの基本構造
以下に示すのは、Uploadifyを使った基本的なHTMLとJavaScriptの設定です。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
</head>
<body>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a id="upload_button" href="javascript:">アップロード</a>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
auto: false,
buttonText: 'ファイルを選択',
swf: 'uploadify.swf',
uploader: 'upload_handler.php'
});
$("#upload_button").click(function(){
$('#file_upload').uploadify('upload', '*');
});
});
</script>
</body>
</html>
サーバーサイド処理 (upload_handler.php)
次に、PHPスクリプトを使ってファイルを保存する例を示します。
<?php
$targetFolder = '/uploads';
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath, '/') . '/' . basename($_FILES['Filedata']['name']);
$allowedTypes = ['jpg', 'jpeg', 'gif', 'png'];
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $allowedTypes)) {
move_uploaded_file($tempFile, $targetFile);
echo json_encode(['status' => 'success', 'path' => $targetFile]);
} else {
echo json_encode(['status' => 'error', 'message' => 'サポートされていないファイル形式です。']);
}
}
?>
HTML5を使用したシンプルなファイルアップロード
HTML5では、`multiple`属性を使用して一度に複数のファイルを選択できます。
<form action="save_handler.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="file_input" multiple="multiple">
<input type="submit" value="送信"/>
</form>
PHPでのデータ処理 (save_handler.php)
以下は、送られてきたファイルを適切に保存し、データベースに登録する例です。
<?php
foreach ($_FILES['files']['name'] as $key => $filename) {
$tempFile = $_FILES['files']['tmp_name'][$key];
$uploadDir = '/data/uploads/' . date("Ymd", time());
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
if (!is_dir($targetPath)) {
mkdir($targetPath, 0777, true);
}
$fileExt = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
$allowedTypes = ['jpg', 'jpeg', 'gif', 'png'];
if (in_array($fileExt, $allowedTypes)) {
$newFilename = time() . rand(1, 10000) . '.' . $fileExt;
$destination = $targetPath . '/' . $newFilename;
move_uploaded_file($tempFile, $destination);
// データベースへの挿入処理
$db->insert('images', [
'url' => $uploadDir . '/' . $newFilename,
'uploaded_at' => date("Y-m-d H:i:s")
]);
}
}
?>
注意点
HTML5を使用する場合、`$_FILES`配列の構造が特殊になるため、事前にデータを整形する必要があります。また、セッションや一時ファイルの管理にも注意しましょう。