minetの日記: 自分用技術メモ(jQuery File Uploadプラグイン) 2
お仕事で、
ASP.Net MVC + Knockout + jQuery ただしjQuery UI非依存で
軽重入り乱れた多数ファイルの非同期アップロード もちろん進捗状況を表示するしキャンセルもできなきゃダメ、当然IEも忘れずに
っつう案件に突入した。
さて、jQueryありなので、jQuery File Uploadプラグインを使うことにする。
ただし前述の要件によって、公式サイトにあるjQueryUIやらAngulerJSやらを使ったサンプルは悉く流用できない。
よって、あまり十分とは思えないドキュメントを参照しつつ、ソースコードとにらめっこしながらデモサイトをリバースエンジニアリングしつつ勉強する事に。
以下は自分用技術メモ。
◆FileUploadプラグインの利用法
<input type="file" id="hoge"> な要素に直接 $("#hoge").fileupload( ... )... を適用してウィジェット化する方法と、
<form id="hoge"><input type="file"> ... </form> のように、form内にinputを入れておいて、親のformに対して $("#hoge").fileupload( ... )... を適用する方法がある。
後者は、リクエスト時にform内の他のinputのデータも同時にポストされる。hiddenなinput要素とか、送信ついでに必ず付加したいデータがある場合に有用。
ASP.Net MVCなら積極的に後者を使うべき。Anti XSRFトークンを埋め込めるから。(使わないとかありえないよね)
◆コールバック関数の引数dataの正体
各種APIのコールバック関数に渡される引数 data は、API間で引き回されるうちにメンバーが場当たり的と言っていいほど「随時」足されていく。
ライフサイクルの後ろに行くほど大量のメンバーで肥大化するグロテスクな怪物だ。逆に欲しいメンバーが生えていない時は、処理が適切に進んでいないことを示している。
(動的言語はこういう設計が当たり前なのんだろうか? JS怖い。)
重要なメンバーについてメモっておく。
まず、 add() すると filesプロパティとsubmit()メソッドが生える。
submit()するとjqXHRプロパティが生える。
done()すると resultプロパティが生える。
だいたい、「次」でコールバックされるであろう関数で必要になるメンバーが生やされる、と思っていい。
ライフサイクルを通じて存在するメンバーはfilesぐらいなので、
それ以外のメンバーを参照する際はnull検査するのが無難。
◆filesの中身
data.filesメンバーの中身は、JS標準のFileオブジェクトの配列。
ただし、配列ではあるが、通常、1つだけの要素しか入っていない。
実質、1つのdata毎に1つのファイルが紐付いている。
例外は、sendオペレーターを呼んでFileの配列を渡した場合と、 addコールバック関数内でdata.filesに要素をわざわざ追加した場合。
これは、1回のリクエストで複数のファイルをまとめて送信する必要がある(アトミックにしたい)場合に用いる。
◆addされたファイルを送信する方法
dataのsubmitメソッドを呼ぶ。
すると、dataがFileUploadウィジェット内の送信キューに入る。
1data毎に1リクエストが発生する。
◆addされたファイルを送信しない(キャンセルする)方法
dataに対してsubmitを呼ばない事。それだけ。
オブジェクトを明示的に破棄する何かがある訳ではなく、特に何もしないだけで良い。
動作デモでは、キャンセルとは「dataに対してそれ以上何もしないこと」である。明示的な中断など不要。
みんなにハブられたdataは、そのうちGCされるのさ。忘れちゃっていいんだ。
(えっ、いいの? JS怖い。)
不安 (スコア:0)
リバースエンジニアリングして得たものは,いつの間にか使えなくなったりしないだろうか.
Re:不安 (スコア:1)
運用環境に置いたライブラリを「いつの間にか更新」することは無いので、その点については心配していません。
それにしてもJSという言語は、ライブラリのソースコードを読んだ時に外部仕様と内部仕様の境界が分かりにくいですね。
このプラグインのコーディングがわかりにくい書き方というだけかもしれませんが…。
型・インターフェースの宣言できる言語のありがたみが良くわかります。