###基本的にFormDataを使って一括で送信する。
var formData_ = new FormData($('#send_form').get(0));
###formData_とセットで別の値を贈りたいときは、appendして加える。
formData_.append('birthday' , $('#birth_day').attr("data-birth_day")); //YMDの8桁をname=“birthday”
###画像を送信する時
contentType
とprocessData
は必ず設置。
contentType: false,
processData: false
var args = {
url: url,
data: formData_,
contentType: false,
processData: false
};
##form名は、enctype属性をつけておく。
<form enctype="multipart/form-data" method="post" id=“任意のID名” action="">
###各inputは、バックエンドが作成したパラメータ名をname属性に入れておく。
<input type="text" name="バックエンドがほしいパラメータ名">
###FormDataが使えない機種やブラウザがあるので、ajax通信する時は全体を囲っておく必要がある。
if (window.FormData) {
//使える時のajax処理
}else{
//使えない時のajax処理
}
//成功失敗の処理:共通
##FromDataの注意点
基本的にFormDataを使って一括で送信する時、FormDataの中から何かを省くということができない。
1つでも省きたい時は1つづつ送る必要がある。
data: {
name: $('#status_name').text(), // 名前
birthday: $('#birth_day').attr("data-birth_day"), // 誕生日
job: $('#status_job').text(), // 仕事
location: $('#status_live_no').attr("data-live_no"), // 住まい
avatarId: $('#chara_check').attr("data-chara_check") // アバターID
}
##Androidの注意点
アンドロイドはinput fileで画像を添付することができないのでformDataにappendする必要がある。
//クッキーを使ってwebviewを判定用JS
<script type="text/javascript" src="{{ $siteBaseUrl }}/js/lib/jquery.cookie.js"></script>
(function() {
//クッキーを使ってwebview判別
var isAndroidApp = ($.cookie('webview') === 'android');
//androidならformData_にspendする
if (isAndroidApp && (0 < imageBlob.size)) {
formData_.append('属性name', imageBlob, 'filename.jpg');
}
});