フォームデータの送信

ユーザーからアップロードされたファイルを、AJAXでサーバーへ送る場合、HTMLの記述は、

<form id="upload">
    <input type="file" name='File'>
</form>

とすると、JQueryでの実装は次のようになります。

function sendFormData(){
    var formData = new FormData($('#upload').get(0));
    formData.append('key','value');
    $.ajax({
        url  : 'receiveFormData.php',
        type : 'POST',
        data : formData,
        cache: false,
        contentType : false,
        processData : false,
    })
    .done(function(data, textStatus, jqXHR){
        //通信成功時の処理
　　　　・・・
    })
    .fail(function(jqXHR, textStatus, errorThrown){
　　　　//通信失敗時の処理
　　　　・・・
    });
}

フォームデータを格納するためにFormDataオブジェクトのインスタンスを生成します。この引数にformの要素を渡すために、get()を使ってJQueryオブジェクトから要素を取り出します。このget()の引数は、格納されている要素のインデックスを指定します。インスタンス生成後にデータを新たに追加する場合は、append()メソッドを用いて、第1、2引数に、それぞれキーと値を指定します。また、ファイルをアップロードする場合は、contentType、processDataを共にfalseに設定し、この関数をフォームのinput要素のイベントに登録します。

$('#upload input').change(sendFormData);

ファイル情報取得

送信されたファイルをサーバー側で取得する場合、スーパーグローバル変数の$_FILESを用います。

$file = $_FILES['File'];

input要素で指定したnameを使って、ファイルの情報を配列で取得します。その配列の構造は次のようになります。

Array ( 
    [name] => Array ( 
        [0] => town.flac 
    ) 
    [type] => Array ( 
        [0] => audio/flac 
    ) 
    [tmp_name] => Array ( 
        [0] => /tmp/phptNa7ql 
    ) 
    [error] => Array ( 
        [0] => 0 
    ) 
    [size] => Array ( 
        [0] => 6903381 
    )
)

それぞれの要素を取り出すには、$file['name'][0]のように指定します。ファイルは一時的にtmp_nameで示されるパスに保存され、アップロードに失敗すれば、errorには0以外の数値であるエラーコードが入ります。

URL: sac.ringil-music.com
環境: さくらのVPS・Centos7・Nginx・PHP-FPM