jquery.upload.jsを使って画像をアップしたらすぐに確認出来るのを作ったけど、IEでなぜかエラーが発生した問題

webサイトを作っていて画像をアップする際に、その場でプレビューしたいとかそういう場合がある。
で、そのためにjquery.upload.jsを使って出来るようにしていたんだが、
なぜかIEでは画像がアップロードできずエラーが出てしまうといった現象が。

そもそもjquery.upload.jsはIEに対応していないのか？
なんて思ったけど全然そんな事は無く他に要因があるのではないかと思って色々と調べてみた。

http://lagoscript.org/jquery/upload?locale=ja
http://blog.futuresoftware.jp/?p=99
http://eastpoint.biz/2012/07/31/ie9%E3%81%A7json-parse%E3%81%8C%E4%BE%8B%E5%A4%96%E3%82%92%E5%90%90%E3%81%8F/
http://d.hatena.ne.jp/cyokodog/20090616/iframe01

参考にしたサイト

■DOMElementが読み込めていない？

で、IEでどうして動かないかの原因を探したところ、
jquery.upload.jsで動的に生成されたiframe内のDOMElementが読み込めていないということがわかった。
で、どうしてDOMElementが読み込めていないのかを検索してたら、
DOCTYPE宣言がないからという理由がネットに転がっていたので自分のを見直してみたけど全然そんなことなく。
ということで他の原因を探すことにしてみた。

■iframeを動的に生成するのがそもそもNG？

そもそもIEだからiframeアップロードが出来ないんじゃないか？と思ってみて、
今度はAjaxでFormData作って送信するというタイプにしてみた。

var form = $('#form').get()[0];
var fd = new FormData(form);

$.ajax({
  method: 'POST',
  contentType: false,
  processData: false,
  data: fd,
  dataType: 'json',
  success: function(data){
    //success
  },
  error: function(){
    //error
  }
});

これでがんばってみたけど、
そもそもIEではIE10からしか対応していないから無理だっていうことだった。
そもそもそれでもIE10でアクセス拒否がコンソール上で発生してたしどういうこと？って思って他の原因を調べることに。

■原因判明 - そもそものIEの仕様

ちなみに自分は画像のようにinput[type="file"]を隠して、
画像をクリックしたらinput[type="file"]をクリックするという仕様にしていた。
そもそもこれが原因じゃないのか？と思って、
表にinput[type="file"]で生成されるボタンをクリックしてアップしてみたらアップ出来た。
ということで原因はクリックイベントでinput[type="file"]のクリックイベントを発生させてもIEだと拒否されてしまうということだった。

すごくややこしい問題だしそもそものプラグインが原因だと思ってしまったし、
というかFormDataはIE10から対応ってふざけているし、って色々と思った。

今回はとりあえずIEの場合だけinput[type="file"]を表に出して、
画像をクリックしてもイベントが発生しないようにブラウザで分岐するという仕様にすることで落ち着いた。
IEも9とか10が増えてきたからIEで悩むということもなくなるだろうと思っていただけど、
意外なところで落とし穴という感じが起きてしまったのはすごく驚いた。
ということでIEにはまだまだ気をつけましょう的なお話。

ちなみに参考にしたサイトは原因を探すために参考にしたけど、
実際には何にも意味がなかったという感じだけどとりあえず載せておきました的な。