FileAPIとxhrを使ったアップローダーサンプル

[Wataru Kanzaki]

神崎渉瑠です。

FileAPIとXMLHttpRequestを使った画像アップローダを作ってみました。
Firefox3.6で確認。
http://home.wi-wi.jp/lab/00c/

といっても送信部分は９割方ライブラリ依存だと思うので、
参考にはならないかも。。。
自作の『だぶ天』というテンプレートエンジンのmultipart/form-data送信を使ってます。

XMLHttpRequest2が実装されてないようなので、
バイナリデータのまま送信すると、
Firefoxの場合は、null文字のところで送信データが途切れるようです。

で、バイナリデータからテキストデータへの変換はescape()にしました。
バイナリデータに対してencodeURIComponentを使うと、
データが破壊されるようです。

ドロップの部分は、1月に中村さんが投稿されたメールから、
http://d.hatena.ne.jp/nakamura001/20100128/1264674914
このページを参考にしました。

Safari4もFileAPIを実装してると聞いたんですが、ちょっと動きません。
ondrop関係かもしれませんが、、、後ほど調べてみます。

複数のファイルを１回でアップロードするには
FileReaderが非同期での読み込みしか出来ないというのがちょっとキツイというか、
めんどくさい処理をしないと行けなさそうですね。
まだドラフトと言うことなので、
同期・非同期の両方が実装されることを望みます。

ちなみにこのサンプルは、
連続写真や、
商品を回転させながら撮影した物でスライダ（動画のような再生ボタン付き）を作り、
ブログやショッピングカートに、
ブログパーツ形式で貼り付けられるようなものを作りたかったので、
その管理画面用にと考えました。

回転画像スライダ
http://home.wi-wi.jp/lab/00b/

もっと言えばプラグインなんでしょうけど、それは敷居が高そうですし。(^^;

でも個人的には、
ドラッグより、フォームからiframeで送信する方が送信しやすいような、、、(^^;

簡単な編集が出来ればともかく、アップロード前に確認できる程度ですかねえ、、、
敷居は高い。。。

[Futomi Hatano]

羽田野@HTML5.JPです。

On Sat, 27 Feb 2010 23:17:15 -0800 (PST)
Wataru Kanzaki <goo...@wi-wi.jp> wrote:

> XMLHttpRequest2が実装されてないようなので、
> バイナリデータのまま送信すると、
> Firefoxの場合は、null文字のところで送信データが途切れるようです。
>
> で、バイナリデータからテキストデータへの変換はescape()にしました。
> バイナリデータに対してencodeURIComponentを使うと、
> データが破壊されるようです。

こちらも参考になると思いますよ。
http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
もしすでにご存じでしたら、すみません。

> Safari4もFileAPIを実装してると聞いたんですが、ちょっと動きません。
> ondrop関係かもしれませんが、、、後ほど調べてみます。

Safari 4では実装されていなかったと思いますよ。
現状はFirefox 3.6+だけだったかと。
ChromiumではM5をターゲットにしているみたいです。
http://dev.chromium.org/developers/web-platform-status#TOC-File-API
Chorome 5では実装されるかもしれませんね。

--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi

[Wataru Kanzaki]

神崎渉瑠です。

> こちらも参考になると思いますよ。http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
> もしすでにご存じでしたら、すみません。

いえ、ありがとうございます。

http://demos.hacks.mozilla.org/openweb/uploadingFiles/
こちらのデモを拝見しました。
なるほど、raw-dataで送信しているようですので、xhrの書き方は参考になるかもしれません。

ファイルを４つ落としてからアップロードすると、
リクエストが４つ発生していたというのは、予想通りでした。
それをリクエスト１つで送信したいんですけどね。。。(^^;

cometとweb-socketの違いは、ちょっと調べただけですが、、、
cometは「受信用xhr、送信用xhrの２つ」、
web-socketは「双方向の通信が１つ」という違いだけらしいですし、
リクエストの数は減らした方が良いと思うので。

ああ、でも、何十個も送信するときは、リクエスト数を４つ程度に増やして、
同時にアップロードさせた方が早くなるのかな。。。
でもリクエストを増やせばサーバーの負荷が、、、(- -)

> http://demos.hacks.mozilla.org/openweb/uploadingFiles/main.js
> ドロップ時
> var img = document.createElement("img");
> img.classList.add("obj");
> img.file=file;

> アップロード時
> reader.onloadend = (function(aImg) { return function(e) { new FileUpload(aImg, e.target.result); }; })(imgs[i]);
> reader.readAsBinaryString(imgs[i].file);

とあったので、
ドロップのタイミングと違うタイミングでfileを取得するためには、
管理用の変数を１つ用意しようかと思ったんですが、
やっぱりエレメントの属性に突っ込んで、エレメントで管理した方が簡単そうですね。

ドロップしたらすぐにアップロード、というよりは、
最初から、ドロップで表示、アップロードボタンでアップロード、と、
２段階にした方が作りやすかったかもしれませんし、参考にしやすかったでしょうか。

> Safari 4では実装されていなかったと思いますよ。
> 現状はFirefox 3.6+だけだったかと。
なるほど。
でもまあ、とりあえずFileAPIやHTML5が正式になって、いろんなブラウザがサポートしてくれないと
一般的に使って貰うというのは無理ですから。(^^;
そもそも使う人がいるのか、と言う問題は＼(・＿＼)置いといて(／＿・)／。
しばらくは<iframe>を使った非同期アップロードを利用します。

[KOMATSU Kensaku]

小松です。

アップロード利用であれば、普通にxhr + postを使われた方が良いように思います。
現状のapiだと、UTF-8エンコードのストリングしか送れませんし。

websocketのpipeline処理で一本のストリームにまとめられるというメリットはありますが、
ファイルサイズが大きくなると、tcp window sizeの制限（TCPのACK待ちで
速度が出ない）のほうが効いてきますので、速度を考えるのであれば、
複数コネクションを利用された方がベターだと思います。（pipelineである程度
まとめるのは"あり"かもしれません）

2010年3月1日1:08 Wataru Kanzaki <goo...@wi-wi.jp>:

[Atsushi Shimono]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

　shimonoです

# 今度はmozillaな帽子で。。いろいろ反応遅くてすみません m__m

(2010/02/28 17:15), Futomi Hatano wrote:
>> XMLHttpRequest2が実装されてないようなので、
>> バイナリデータのまま送信すると、
>> Firefoxの場合は、null文字のところで送信データが途切れるようです。
>>
>> で、バイナリデータからテキストデータへの変換はescape()にしました。
>> バイナリデータに対してencodeURIComponentを使うと、
>> データが破壊されるようです。
>
> こちらも参考になると思いますよ。
> http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
> もしすでにご存じでしたら、すみません。

　hacks.mozilla.org にいいコンテンツがたくさんあるのに日本語版をどこかでやったり
集めたりしないのか？というコメントをいろいろいただいていたり、、そもそもこのサイ
トはFirefox 3.5のリリースのときの35days projectから始まったサイトで、その中国語版
もあるのに日本語版は？というコメントを(宴会などで)いろいろいただいておりました。。

　で、さすがに次々にポストされてくるのを全部やるのは厳しい(の前に最近活動停滞して
るよね？というのもありますが)ということで、とりあえず場所は作りました！！（こら

https://dev.mozilla.jp/hacksmozillaorg/ - hacks.mozilla.org @ Mozilla Developer Street (modest)

　すでにblogとかで翻訳されている方のポストへのリンクの追加や、いっちょやってみる
か！という気のある方はぜひお願いいたします m__m
# mozilla.org との翻訳許可などの処理はちゃんとやっておりますのでご安心ください。

　ではでは

ps.
　あと、mozilla関係に軸を置いてますが、ウェブ標準も含んだ"アナウンスリスト"を開設
してます。リストの詳細は https://ssl.jpmoz.net/mailman/listinfo/news-info をご覧く
ださい。なお、運用の詳細については http://mozwiki.jpmoz.net/info/news-info をご参
照ください。関係しそうなポストをお待ちしております m__m
# 注: SSL証明書がまだきちんとしていませんので、その点はご了承ください。
　気になる方は証明書SHA1フィンガープリント(下)をご確認ください。
C0:9A:CD:0B:32:4B:17:3E:0A:33:41:E5:A4:0D:CC:C5:C4:7B:FD:17
- --
Atsushi Shimono - shi...@bug-ja.org
Mozilla Evangelist
Bugzilla Localization WG member; Bugzilla Users Group in Japan
skype:shimono_univ; http://blog.himor.in/; http://facebook.com/himorin
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (MingW32)

iQIcBAEBCgAGBQJLugdDAAoJEHI5evwJBSZdqs4P/RtQ5mNFM0D0ouOLolmDZNX9
itIVgHMAcacf5UdqiHw7AxCEoD3UUJNmvaDqbBRVQCzS6Rc5Fx57t8ywJ8emFm/b
6v9K732B+/tLo/UmNeF3NZrM7ZQ/jt+yPIuv0PGGcwuWldQY3Dl0UGojjIcd1kD2
s/7FixXjyntN1/OFIZOSp9h82rb+GUuiP2N4N3THwmvo5JOXRQ67mP2YLRoY889F
zC0irtaSc3vshNl+7xjkg/tCMu9Kb8ibtAy7bv90HboZxthPsNJlaJWafzyOl4pt
YTdsvvPyP5JB/2ma4jDzS8sgP5lvpyM1bIJ9SGQXSanTECNJWnHAGHwVE3atr3c8
QdF48b1VD2NOpjFE98zSNgPLl6fLpG5CZj8WNmvageblFLXMFE+7GCbp/qieaPTH
PjiucYUl8hnTX4k6t8+ZqJaTTDmXxQvvnShN0e/GAC81y3z+ev4kHkMMvFd6MifS
lcVhX4eURswmp5FI+2kB6eXNO5L9UtSQgdvsr9yzmIwvM1vj59QD6JcBrpUrvTQS
/VW2b19CxqNliupIC01FCHhyGRHr8nwdsmhty9/lyYhx+yiwlO3tDQ8eLYhzgHFl
Q6L6YnPkny2eqAnA25E/VUbTRFG7d0CMR67z+aFkUVo0dci9hV3iBT4w65PzHrP3
gp+D6aLWs+6WiKEdkVYm
=YXls
-----END PGP SIGNATURE-----