強火で進め このページをアンテナに追加 RSSフィード

整理された情報は こちら へどうぞ。

2011年11月02日

[]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>

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

f:id:nakamura001:20111103024857p:image

ボタンを押すと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>

サーバサイドからは以下の様にフォームで複数のファイルを指定してアップロードとした場合と同じ扱いになります。

f:id:nakamura001:20111103024828p:image

その為、サーバサイドはそのようなフォームからファイルを受け取るプログラムと同様の記述を行えばOKです。


ちなみにこれはGDDで知った機能だったります(汗)。

Chrome 7の頃から搭載されていた機能なんですね。

Googleより「Google Chrome 7.0.517.41(Stable)」がリリース : Mac OS X News & Topics

http://macosx.seesaa.net/article/166623105.html

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

リンク元