input要素にfilesプロパティが追加されました

[白石俊平]

白石です。

<input type="file">で作成する事のできるファイルアップロードフォームですが、選択されたファイルに関する情報をJavaScriptから取得できるよう、仕様が追加されました。

なので、選択されたファイルの名前やファイルサイズにアクセスするJavaScriptコードを以下のように書けます。

function filesSelected() {
//filesプロパティから、選択されたファイルの情報を取得
var files = document.getElementById("file").files;
for (var i = 0; i < files.length; i++) {
var fileName = files.item(i).fileName;
var fileSize = files.item(i).fileSize;
alert("name:" + fileName + " size:" + fileSize);
}
}

このコードが動作するのは、現時点だとFirefox3.5, Safari4, Chrome3でした（IE8,Opera10は未実装）。

filesプロパティは、FileListと言う疑似配列で、一つ一つの要素はFileです。
こうしたFile APIに関しては、こちらが仕様書となるようです。

一般公開されているバージョン：http://www.w3.org/TR/file-upload/
最新ドラフト：http://dev.w3.org/2006/webapi/FileUpload/publish/FileAPI.xhtml

fileName, fileSizeと言ったプロパティ名は、一般公開されているバージョンに記載されているものです。
最新ドラフトだと、name, sizeといったプロパティ名になっています。

他にも、ファイル内容をバイナリ形式やテキスト形式で取得するためのgetAsBinary()やgetAsText()と言ったメソッドも持つようです。
Gearsで実現できていた、XMLHttpRequestによるファイルアップロードを一般のブラウザで実現できる日も近そうですね。

以上、小ネタでした～

===
コミュニティ活性化のため、HTML5に関するネタを一日一回何かつぶやいてみます(^^)
しょぼいネタでもご容赦ください。賛同者募集中！
##############################################
白石俊平

Blog:http://d.hatena.ne.jp/Syunpei/
mixi:http://mixi.jp/show_profile.pl?id=3989166
Twitter:Shumpei
（マイミク申請、Twitterフォローはお気軽にどうぞ！）

株式会社あゆた
http://ayuta.co.jp/index.html
##############################################

[futomi]

羽田野＠HTML5.JPです。
私も、「File Upload」の仕様には注目してました。
特に、getDataAsXXXX()メソッドとXMLHttpRequestを組み合わせて、おもしろいことが
できそうですよね。
以前、ファイルアップロードのプログレスバーをJavaScriptで実現できないかなぁと思い、
調べたときに、この仕様を見つけた覚えがあります。
その時は、実装しているブラウザがFFだけだったような。他のブラウザでの実現方式
が見つからず、その時はあきらめてしまいました。

> このコードが動作するのは、現時点だとFirefox3.5, Safari4, Chrome3でした（IE8,Opera10は未実装）。

情報ありがとうございます。
あとは、IEですね。もしIEが同等の機能を実装することになったら、実験ではなく、
正式なサービスとして、この仕様が使われるシーンが出てくるのかもしれませんね。

Microsoftさん、ぜひ、お願いします！！！

でも、この仕様って、現在のHTML5仕様にはないですよね。
HTML5から分離したのかしら？それとも、はじめからHTML5とは関係がないのでしょうか。

ではでは。

[白石俊平]

白石です。

> でも、この仕様って、現在のHTML5仕様にはないですよね。
> HTML5から分離したのかしら？それとも、はじめからHTML5とは関係がないのでしょうか。

いや、HTML5の仕様書に「さっき」コミットされた仕様みたいです。
たまたま見つけました。
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#dom-input-files

で、filesプロパティの型は、2006年に草案が作られたFile APIを参照することにしたみたいですね。
ただ、File APIもつい最近（8/1）に書き換えてるみたいなのですけど。



2009/8/6 futomi <futomi...@gmail.com>:

[futomi]

羽田野＠HTML5.JPです。

> いや、HTML5の仕様書に「さっき」コミットされた仕様みたいです。
> たまたま見つけました。http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.htm...

そうだったんですね。情報ありがとうございます。

---- 以下、引用 -----
The files DOM attribute allows scripts to access the element's
selected files. On getting, if the DOM attribute applies, it must
return a new FileList object that represents the current selected
files. If the DOM attribute does not apply, then it must instead throw
an INVALID_STATE_ERR exception. [FILEAPI]
--------------------------

とありますが、HTML5仕様では、files DOM属性を実装することまでを規定し、その詳細は、
HTML5仕様では触れず、[FILEAPI] 、たぶん「File API」に準拠してね、といった感じでしょうかね。
もしそうであれば、File API は、HTML5に統合されるのではなく、今後も、別々の仕様として存在
することになるのでしょうかね。

> で、filesプロパティの型は、2006年に草案が作られたFile APIを参照することにしたみたいですね。
> ただ、File APIもつい最近（8/1）に書き換えてるみたいなのですけど。

結局、どうなるんでしょうね。
しばらく、様子見ですね。

--
有限会社futomi
羽田野 太巳
http://www.futomi.com/
http://www.html5.jp/