パスワードを忘れた? アカウント作成
11530601 journal
プログラミング

minetの日記: 自分用技術メモ(jQuery File Uploadプラグイン) 2

日記 by minet

お仕事で、
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怖い。)

この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
  • by Anonymous Coward on 2014年08月30日 7時31分 (#2666543)

    リバースエンジニアリングして得たものは,いつの間にか使えなくなったりしないだろうか.

    • by minet (45149) on 2014年08月30日 17時25分 (#2666769) 日記

      運用環境に置いたライブラリを「いつの間にか更新」することは無いので、その点については心配していません。

      それにしてもJSという言語は、ライブラリのソースコードを読んだ時に外部仕様と内部仕様の境界が分かりにくいですね。
      このプラグインのコーディングがわかりにくい書き方というだけかもしれませんが…。

      型・インターフェースの宣言できる言語のありがたみが良くわかります。

      親コメント
typodupeerror

日々是ハック也 -- あるハードコアバイナリアン

読み込み中...