Safari(iOS および macOS)にてFormDataでのファイル送信に失敗する

不具合, 管理者blog

iOS上の全てのブラウザ、および、macOS上のSafariにて、FormDataを使ってinput[type=file]を含むフォームの内容を送信しようとした際に、ファイルが添付されていないと処理が失敗します。これは、Safariの不具合で、iOS11.3以降で発生しているようなのですが、Safariのせいにしたところで問題は解決しません。

ということで、この不具合を回避するコードを作成しました。

//ここは通常のコード
var data = new FormData($('#request-sheet-form').get(0));

//ここが作成したコード type=fileの場合に中身が空なら要素自体を削除する
$("input[type=file]").each(function(i,j){
	var name = $(j).attr("name");
	if(!$('[name=' + name + ']').val()) {
		data.delete(name);
	}
});

//ここから先も通常のコード
$.ajax({
	url: 'hoge.php',
	type: 'POST',
	data: data,
	processData: false,
	contentType: false,
}).done(function(data, status, xhr){

});
facebookでShare
XでPostする