勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

FormDataを使ったAjax通信がiPhoneのみエラー

   

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAndroid端末では送信できるものの、iPhoneのみ特定ケースでエラーが発生した。以下に症状と対応策をメモ。

 

症状

このサンプルページで作ったようなFormDataオブジェクトとAjax通信の組み合わせで、iPhoneのみ画像を選択しておかないとエラー(fail側)と判定されてしまう。画像を選択すれば送信できる。

ただこれは以前は動いていたように思う。というのも仕事で似たようなソースで書いており、その際にテストしているので動いたはず。

 

エラーの原因

textStatusを出力させると400エラーになっていた。不正な要求もしくは要求の形式が正しくないらしい。FormDataを使わずに1つずつ$('.hoge').val()みたいに取得する形にするか、もしくはajaxではなく普通にsubmitさせれば改善しそうだけどそれは手間がかかる。

次にFormDataの中身を確認してみたところ、iPhoneのみ画像を選択していなくても、なぜかオブジェクトが格納されていた。これが原因っぽい。

 

対応策

iPhoneのみ画像が選択されていない場合はFormDataオブジェクト内から画像のデータを削除する、ということで送信前に以下を追記。

 

まとめ

FormDataをAjaxで送信する場合にiPhoneのみエラーが発生する場合はファイル関連の送信データ部分を疑う。ファイルを選択していないのに、送信データに入っている場合は削除することで改善される。

 - jQuery

  関連記事

jquery_logo
プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...

jquery_logo
画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...

jquery_logo
jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

jquery_logo
画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

jquery_logo
imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jquery_logo
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jquery_logo
jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

jquery_logo
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...