FormDataを使ったAjax通信がiPhoneのみエラー
2024/01/29
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAndroid端末では送信できるものの、iPhoneのsafariにて「input="file"」が未選択というケースでのみエラーが発生した。「input="text"」や「<textarea>」は未入力でも問題無し。以下に症状と対応策をメモ。
症状
このサンプルページで作ったようなFormDataオブジェクトとAjax通信の組み合わせで、iPhoneのみ画像を選択しておかないとエラー(fail側)と判定されてしまう。画像を選択すれば送信できる。
ただこれは以前は動いていたように思う。というのも仕事で似たようなソースで書いており、その際にテストしているので動いたはず。
エラーの原因
textStatusを出力させると400エラーになっていた。不正な要求もしくは要求の形式が正しくないらしい。FormDataを使わずに1つずつ$('.hoge').val()みたいに取得する形にするか、もしくはajaxではなく普通にsubmitさせれば改善しそうだけどそれは手間がかかる。
次にFormDataの中身を確認してみたところ、iPhoneのみ画像を選択していなくても、なぜかオブジェクトが格納されていた。これが原因っぽい。
対応策
iPhoneのみ画像が選択されていない場合はFormDataオブジェクト内から画像のデータを削除する、ということで送信前に以下を追記。
if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 ){
var tmp_file = form_data.get('img'); //imgの部分は適宜書き換え
if( tmp_file['size'] == 0 ){ //ファイルサイズが0の場合(画像が選択されていない場合)
form_data.delete('img'); //FormDataオブジェクトからimgキーの情報は削除
}
}
まとめ
FormDataをAjaxで送信する場合にiPhoneのみエラーが発生する場合はファイル関連の送信データ部分を疑う。ファイルを選択していないのに、送信データに入っている場合は削除することで改善される。
関連記事
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...
-
-
jQueryで偶数or奇数行に任意のClassを付与する方法
tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...
-
-
jQuery Alert Dialogsで表示後に処理したい
最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...
-
-
jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動
jQueryで後から追加した要素にhasClass / addClass / r ...