フォームデータをAjax（jQuery）でサーバ（PHP）へPOST

フォームデータをjQueryの$.ajaxを使ってPHPへポスト紙、戻り値を取得する方法の備忘録です。

htmlはこんな感じ

javascriptはこんな感じ

$('#foo').submit(function(){
 if(window.FormData) {
  formdata = new FormData($('#foo').get(0));

  $.ajax({
   url: 'example.php',
   type: 'POST',
   data: formdata,
   processData: false,
   contentType: false,
   dataType: 'json',
   success: function( data ) {
    console.log(data);
   }
  });
 } else {
  // IE8用
 }
});

PHPはこんな感じ

 $size[0],
              'height' => $size[1],
              'type' => $type
    );
     
    header('Content-type: text/html');
    echo json_encode($data);
}
?>

FormDataはIE10以上でしか使えないので要注意。
if(window.FormData){}で分けておいて、
elseの方にiframeへ出力させるものを書いておいて、それを引っ張ってくる方法を取るみたいです。

PHPは$dataに入れた連想配列をjson形式で戻しています。
successの後のconsole.log(data)では、

{
“width”:”画像の幅”,
“height”:”画像の高さ”,
“type”:”ファイルタイプ（image/jpeg等）”
}

が返ってきます。
$_FILES[‘file’]の’file’は対象inputのname属性が入ります

参考
http://www.koikikukan.com/archives/2014/09/30-013333.php