Chromeにてアップロードファイルにフォルダを指定するinputタグの記述例

Chromeの場合は以下の様に webkitdirectory と directory を付ける(directoryは省略してもOK。仕様が確定してからは webkitdirectory の代わりに directory が使われる様になるのだと思われます)とアップロードするファイルの指定としてフォルダが選択できます。実際にはフォルダ内のファイル全てがアップロードされる形になります。

<input type="file" webkitdirectory directory />

実際のコードとしてはこんな感じになります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>webkitdirectoryの使用例</title>
</head>
<body>
<script>
function test(files) {
	var i;
	var res = document.getElementById("res");
	res.innerHTML = "";
	for (i=0; i<files.length; i++) {
		res.innerHTML += files[i].fileName + "<br />";
	}
}
</script>
<input onChange="test(this.files)" type="file" id="dir-select" webkitdirectory directory />
<div id="res"></div>
</body>
</html>

画面はこの様になります。

ボタンを押すとOS標準のフォルダ選択のダイアログが表示され、そこでフォルダを選択する流れとなります。

このプログラムはこちらで試せます(Chromeでアクセスして下さい)。選択したフォルダ内のファイルを全て表示する為、ファイルが少なめのフォルダで試す方が良いです。

サーバ側でファイルを受け取る場合は以下の様な記述になります。

【upload.php】

<?php
// ※実際にはここでアップロードされたファイルの保存処理を行う
// var_dump($_FILES);
?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>webkitdirectoryの使用例</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input name="f[]" type="file" webkitdirectory directory />
<input type=submit>
</form>
</body>
</html>