HTML5でファイル複数同時アップロード

suin2011年1月23日

W3CのHTML5草稿によると、<input type="file"...>タグにmultiple属性が追加されたようです。この属性がセットされた<input type="file"...>は、複数のファイルを選択してアップロードできるようになります。複数のファイルを選択する方法はOSによって異なります。Windowsではctrl+クリック、MacOSではCommand+クリック。あるいは、Shift+クリックで範囲選択することができます。

試せる環境を用意する

multiple属性に対応しているブラウザとしては、Webkit系のGoogle Chrome、Safariがあるみたいです。今回は、Safari 5.0.3(MacOSX 10.6.5上)で試してみました。

ファイルアップロードが正しくアップロードされたか確認するためにPHPのプログラムを用意しました。そのソースコードは次のようになっています。<input type="file"...>にセットされたファイルは、PHPではその情報がグローバル変数$_FILESに代入されます。下のプログラムでは、$_FILESの内容を出力します。

<html>
<head></head>
<body>
<form action="" method="post" enctype="multipart/form-data">
Files:<input type="file" name="files[]" multiple>
<input type="submit" value="submit">
</form>
<pre>
<?php
if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
{
    var_dump($_FILES);
}
?>
</pre>
</body>
</html>

試してみる

用意したプログラムをSafari5で開いてみます。multipleだからといって特に変わった表示にはならないようです。

次に、Shiftを押しながらファイル複数選択を試みます。すると、選択されたファイルはハイライトされて、ブラウザ上でちゃんと複数選択が機能しているのがわかります。

ファイル選択のダイアログが閉じると、「6ファイル」と選択したファイル数が画面に出ました。

最後に、送信して$_FILESの内容を確認してみます。ちゃんとサーバにもファイルが送信されていることが確認できました。

はまりどころ

単に、<input type="file"...>にmuliple属性を付けただけでは複数ファイルアップロードできないようです。name属性にカギカッコを付け、明示的に配列にする必要があるようです。

HTML5すげぇ

些細な機能追加だけど、ある意味革命的な機能だよねー。今までファイル複数選択を実装しようとしたら、FlashやSilverLightを使わないと無理だったし。ウェブアプリの開発現場で、たまに複数アップロードの対応をお願いされることがあったけど、 Flashなどで対応するとコストが増すので、<input type="file"...>を複数個配置するような対処してきたし。しかし、HTML5が普及していけば、こうした要望には低コストで答えることができるし、ユーザの満足度も高まるんじゃないかな。さすが、ウェブアプリに尖ったHTML5。びっくり。

#あ、気づいたら日本語でブログ書いてた。英語で書くって決めたのに。この手の日本語リソースなさそうだし、まいっか。