jQuery Ajaxでファイルを含む複数のデータを送信する

jQuery Ajaxでhtmlの<input>タグで入力したファイルを送信する方法はいろいろ

• <form> タグの〜機能を使う
• 新しく定義したDataFormオブジェクトにappend()でファイルをセットし、.ajax()で送信

複数のデータを渡したい時

ファイルやその他文字列を含む複数のデータを渡したい時は、後者

例）ユーザが入力したテキストファイルと一緒に識別子を送って処理分岐したい

test.html

<form id="txt_form">
  <input type="file" name="fl" id="txt_file">
</form>

test.js

$('#txt_file').on('change', '', function(){
    var formdata = new FormData($('#txt_form').get()[0]);
    formdata.append("hoge","fuga");
    $.ajax({
        url  : "test.php",
        type : "POST",
        data : formdata,
        processData : false,
        contentType : false
    }).done(function(data) {
       alert('SUCCESS!');
     }).fail(function(data) {
       alert('ERROR!');
     });
  })

例えばPHPで受け取る時はこう

test.php

<?
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  //ファイル系は$_FILES[（<input>タグのname属性の値）]に格納される
  //$_FILES[（<input>タグのname属性の値）]["tmp_name"]で一時格納場所のパスが取得できるので、
  //move_uploaded_file()を使ってmvして処理する
  move_uploaded_file($_FILES["fl"]["tmp_name"], "（任意のパス）");

  //その他の値は$_POST[（キー値）]で取得可能
  if($_POST['hoge'] === "fuga"){
   ...
  }else{
   ...
  }
}

注意

html側で<input>タグにname属性を付け忘れると正しく格納されない。

var formdata = new FormData($('#txt_form').get()[0]);

この記述によって、idが'txt_form'であるフォームの子要素のうち、name属性の値をキー値となり、入力された内容がバリュー値となってFormDataオブジェクトに格納される。