File APIのワーキングドラフトが公開
Shumpei Shiraishi
File APIの最初のワーキングドラフトが公開されました。
http://dev.w3.org/2006/webapi/FileAPI/
HTML5には深く関わってくるAPIなので、ちょっと注目が必要かもしれません。
HTML5からは、ファイル選択ダイアログ（input type="file）やドラッグ＆ドロップで、Webアプリがファイルを受け取る事ができるようになります。
Webアプリは受け取ったファイルの内容をテキストやバイナリ（Blob）で読み取る事ができ、XMLHttpRequestを用いて送信する事も可能です。
JavaScriptによるファイルアップロードやファイル読み込みが簡単に実現できる訳ですね。
また、ファイルの読み取りは基本的に非同期で行われますが、Web Workers内であれば同期での読み取りも可能です。
現状は、FirefoxやWebkitで非互換の実装が行われている状態ですが、このドラフトに従った実装が早急に始まると考えて良さそうです。
以下はAPIの使い方をメモ書き。
ファイル選択ダイアログでユーザが選択したファイルにアクセスし、内容を読み取るには以下のようにします。
ファイルを読み取るにはFileReaderオブジェクトを用いるのがポイントです。
// ファイルアップロード要素のDOMを取得
var fileElem = $("input[type='file']")[0];
// ユーザが選択したファイル（複数の可能性があるため、FileList型）
var files = fileElem.files;
// ファイル読み込みを行うオブジェクト
var reader = new FileReader();
// 読み込み完了時のイベントを補足
reader.onload = function(event) {
// ファイルの内容を文字列で取得（FileReader.resultが内容を保持）
var fileContent = reader.result;
... // ファイルの内容を処理
};
for (var i = 0; i < files.length; i++) {
var file = files[i];
// ファイルの内容を読み取る
reader.readAsText(file, "UTF-8");
}
===
コミュニティ活性化のため、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
##############################################
rera
ドキュメントはまだ読んでいませんが、
ファイルアップロード前に確認するために、
ファイルサイズの取得や、<img>やcanvasに表示出来るとうれしいかなあ。
XMLHttpRequestでファイルをアップロードできるようになると言うことは、
send()で渡すデータがDOMStringからバイナリになり、
enctype=multipart/form-dataをネイティブで対応するようになるということでしょうかね。
On 11月5日, 午前11:12, Shumpei Shiraishi <shumpei.shirai...@gmail.com>
wrote:
Shumpei Shiraishi
> ファイルサイズの取得や、<img>やcanvasに表示出来るとうれしいかなあ。
ここらへんは、今のドラフトでも可能みたいです。data URLでファイルの内容を取得できるので、img要素のsrc属性にそのまま指定できます。おそらく。
> XMLHttpRequestでファイルをアップロードできるようになると言うことは、
> send()で渡すデータがDOMStringからバイナリになり、
> enctype=multipart/form-dataをネイティブで対応するようになるということでしょうかね。
ここいらへんはまだまだどうなるかわかりませんが、おおむね神崎さんのお考え通りになるのではないかと、僕も思っております。
XMLHttpRequest Level2はまた別の仕様で検討されているので、足並みを揃えるのに苦労している感があります。
一つ前の公開ドラフトだとsend()にByteArrayを渡せるようになってたんですけど（http://www.w3.org/TR/2009/WD-XMLHttpRequest2-20090820/#the-send-method）、10/12のドラフト（http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#the-send-method）では削られちゃってますね。
2009/11/6 rera <goo...@wi-wi.jp>:
Shumpei Shiraishi
Firefox3.6 b4で、File APIが実装されたと言うので触ってみました。
http://www.ayuta.co.jp/html5-samples/index.html#fileapi-sample
（一番下の「File APIサンプル」）
ファイル選択、もしくはドラッグ＆ドロップにより、ファイルの名前やサイズを取得可能です。
いつのまにか、ファイルの複数選択（<input type="file" multiple>）も実装されていたんですね。
ぼくの勘違いでなければ、FileReaderはまだ実装されておらず、ファイルの読み込みはできないような気がします（FileReader is
undefinedと言われました）。
でも3.6に入るのは間違いないようなので、期待大ですね！
https://developer.mozilla.org/en/DOM/FileReader
2009/11/6 Shumpei Shiraishi <shumpei....@gmail.com>:
Shumpei Shiraishi
> ぼくの勘違いでなければ、FileReaderはまだ実装されておらず、ファイルの読み込みはできないような気がします（FileReader is
> undefinedと言われました）。
完全に勘違いでした(汗)
既に完璧に実装されてました！
と言う事で、FileReader APIを使ったサンプルもご用意しました。
http://www.ayuta.co.jp/html5-samples/index.html#fileapi-sample
（一番下の「FileReader APIサンプル」）
選択された内容のファイルを読み込んで、画面内に表示します。
文字エンコーディング指定、複数ファイル選択可能！
いやー、便利な時代になったものです。
2009/12/2 Shumpei Shiraishi <shumpei....@gmail.com>: