ファイル選択をしたら自動的にajaxでアップロードする機能をつくっていたのだけど、やっぱりIE対応でつまづいた。いちおうIE8対応を目指した。

ajax送信は、このライブラリを使用。

jQuery Form Plugin
http://malsup.com/jquery/form/

そのままだとIEで動かない。
596行目のfinallyがIEではエラーになるので、コメントアウト。

次、ファイル選択で自動アップロードしたかったので、jQueryのchangeイベントで処理を書いたが発火してくれない。

jQueryのchangeイベントで気をつけること
http://d.hatena.ne.jp/sho-yamasaki/20120319/1332168988

onchangeならうまくいくらしい。

あと、ファイル選択部分を以下をつかって整えた。

JavaScript · Jasny Bootstrap
http://jasny.github.io/bootstrap/javascript/#fileinput

がIE9以下だとうまく動作しないので、条件付きコメントで切り分けることにした。IE10は条件付きコメントが廃止されたので、他のモダンブラウザと同様に動作する。

ということで、最終的なコードはこんなかんじ。

毎回、IEには苦労させられる。テンプレ通りIE爆発しろ!と言っておこう。

Djangoアプリを開発しているのだが、テンプレートエンジンをJinja2を使っている。

[Python]djangoのテンプレートエンジンをjinja2にする方法 | Forodin
http://blog.forodin.com/2012/12/django%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3%E3%82%92jinja2%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-4/

で、フォームの作成を楽にしたくて、Jinja2のマクロ機能を使って、フォーム用のマクロを書いた。

Bootstrap3の使用前提で、修飾してある。
ファイルアップロードは、

JavaScript · Jasny Bootstrap
http://jasny.github.io/bootstrap/javascript/#fileinput

これを使っている。

あまり需要なさそうですが、どうぞご利用下さい!

表題の通りのプラグイン。JSONPはGETはできるけどPOSTができない。
クロスドメインでPOSTがしたかった。

セサミン・ラボ - jQuery でなんちゃってクロスドメイン POST
http://www-al.nii.ac.jp/~kameda/blosxom/entries/img/cmlog/1002010614/

↑にパラメーターをつけて送信できるように改良しました。感謝。

若干、パラメーターの埋め込みをハードコーディングしてしまってますが、だいたいの用途に使えると思います。
ご自由にお使い下さい。

ウェブページ