GitHub - kyanny/html5_file_api_ajax_upload_sample: HTML5 file API + ajax file upload sample
HTML5 の file API というのが面白そうなのでちょっといじってみた。
デモを動かすには Plack と JSON と Path::Class が必要です。このブログ読んでる人ならどれも ready for use ですよね。もしまだのひとは cpan -i Plack JSON Path::Class でよろしく。 git clone して plackup して Firefox 3.6.x 以降で開いてください。
複数ファイルをドロップしたときになんかうまく動いてない気がするとか、 app.psgi の書き方がだいぶいい加減とか、微妙なところはたくさんあるけどとりあえず動くところまでいけたので公開しちゃいます。「ここまでやりたい」と思ってたところまでたどり着けたことが実はあんまりないので、こんなのでも公開してブログに書けるのが嬉しかったりする。
HTML5 って「あぁ、 Flash と戦争したがってそうなアレね」くらいにしか認識してなかったけど、いろいろ面白いことができそうなんだなぁ。トレンドをちゃんと追わないとダメだね。別に Flash とどっちがいいかとかじゃなくて、新しいものを触ってみるのは刺激的で面白いから、自分のためになる。で、結局完璧徹夜して朝日を浴びながらこれ書いてます。いまから寝るべきか悩む...
あと実は Plack もこれがほぼ初めてだったりする。 eg/*.psgi を plackup してみたことはあったけど、自分で .psgi 書くのも Plack::Request 使うのも初めて。いろいろ調べたり、調べ足りないところもあるけど、まぁ最初はへたっぴでもいいや、動いたし。
HTML5サンプル集 - 株式会社あゆた にサンプルコードがたくさん載っていたので、すぐに自分でも試すことができた。ありがとうございます。まだ情報もそんなにおおくないのに、日本語で積極的に情報公開していく姿勢は素晴らしいと思う。プロなら HTML5 だろうがなんだろうが飯のタネなら英語のリソース読めよって意見も一理あるけど、だからといって日本語の情報を増やすのが良いことに変わりはない。
file API には readAsBinaryString というのがあって、そのなの通りファイルデータをバイナリで扱えるのだけど、 xhr でバイナリデータを送信するときは xhr.send() じゃなくて xhr.sendAsBinary てのを使う必要がある。これは Big Sky :: XMLHttpRequestでファイルをアップロード と HTML5 File API + XmlHttpRequest = SWFUpload, now what? | Blog: timdream をみつけて解決した。 mattn++
いま書いてて思ったけど、バイナリデータで送らなくてもふつうのフォーム送信みたいに multipart/form-data とかでファイルを送ることもできるのかな？なんか js からはセキュリティ上の理由でローカルファイルにアクセスできないからダメだよなー、おっバイナリデータを扱う API があるからそれ使おう、って他の可能性調べずにやっちゃったけど、ふつうのファイルアップロード相当のこともやれるのかもしれない。
