勉強したことのメモ

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オブジェクト内から画像のデータを削除する、ということで送信前に以下を追記。

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

  関連記事

jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

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

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

セレクトメニューにサジェスト機能をつける(select2)

formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...

jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jQuery Nice Selectを特定ページのみ無効にしたい

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...