XMLHttpRequestによるファイルのアップロード

こんばんは。きわさです。

XMLHttpRequestを使って非同期でファイルをアップロードしたかったため調べました。

HTMLにファイル送信フォームを作成

<form id='form1' method='POST' enctype='multipart/form-data'>
    <input type='file' name='file1' />
    <input type='button' value='upload' onclick='uploadFunc()' /> 
</form>

formタグで送信フォームを作成します。
ファイルを送信する場合はenctype=’multipart/form-data’が必要です。

アップロードするJavascript処理を作成

function uploadFunc() {
    var formData = new FormData(document.getElementById('form1'));
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    xhr.onreadystatechange = function() {
        // レスポンス受信時処理
    }
    xhr.send(formData);
}

XMLHttpRequestを送信する処理を作成します。
送信するデータはformタグのIDから取得します。new FormData(document.getElementById(‘form1’))

アップロードファイルを受け取るPHP処理を作成

<?php
if(is_uploaded_file($_FILES["file1"]["tmp_name"])) {
    $tmpPath = $_FILES["file1"]["tmp_name"];
    $savePath = 'file/' . basename($_FILES["file1"]["name"]);
    move_uploaded_file($tmpPath , $savePath);
    echo 'OK';
} else {
    echo 'ERROR';
}
?>

アップロードされたファイル情報は$_FILESに格納されます。
今回はinputタグのnameの値を’file1’にしたので$_FILES[“file1”]でアクセスできます。
$_FILES[“file1”][“tmp_name”]で、一時的に格納されるファイルパスを取得します。ほかにも“name”でファイル名、“size”でファイルサイズが取得できます。
is_uploaded_file()でアップロードされたファイルの有無をチェックします。
move_uploaded_file()で一時的に格納されているファイルを正式な場所へ移動します。