AJAXとjQueryを使ったHTML5ファイルアップロードの実装方法

AJAXとjQueryを組み合わせることで、ページを再読み込みすることなくHTML5のFile APIを活用したファイルアップロードを実装できます。フォームが送信されたタイミングで送信処理をインターセプトし、以下のコードスニペットを実行することでファイルをアップロードできます。

クライアント側の実装（JavaScript / jQuery）

まず、input要素からファイルを取得し、FileReader APIを使ってテキストとして読み込みます。その後、jQueryの$.post()メソッドでサーバーにデータを送信します。

// ファイルの取得
var myFile = document.getElementById('fileBox').files[0];
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = myFunc;

function myFunc(event) {
    var res = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name;
    $.post('/myscript.php', { data: res, name: fileName }, continueSubmission);
}

コードのポイント

• files[0]：ファイル選択ボックス（fileBox）から最初の選択ファイルを取得します。
• readAsText()：ファイルをUTF-8エンコードのテキストとして読み込みます。画像などのバイナリファイルの場合は、readAsDataURL()やreadAsArrayBuffer()の利用を検討してください。
• onloadイベント：ファイルの読み込みが完了した時点でmyFuncが呼び出され、読み込んだ内容とファイル名がサーバーへPOST送信されます。

サーバー側の実装（PHP）

次に、サーバー側のスクリプト（myscript.php）では、POSTされたデータを受け取り、ファイルとして保存します。

$data = $_POST['data'];
$fileName = $_POST['name'];
$myServerFile = time().$fileName;

// 上書き防止のためタイムスタンプをファイル名に付与
$fp = fopen('/uploads/'.$myServerFile,'w');
fwrite($fp, $data);
fclose($fp);
$retData = array( "myServerFile" => $myServerFile );
echo json_encode($retData);

サーバー側処理の解説

• time().$fileName：UNIXタイムスタンプを元のファイル名の先頭に連結することで、同名ファイルによる上書きを防止しています。
• fopen() / fwrite() / fclose()：uploadsディレクトリ内に新規ファイルを作成し、受信したデータを書き込んでいます。
• json_encode()：保存されたファイル名をJSON形式でクライアントに返却します。これにより、JavaScript側のコールバック関数（continueSubmission）でアップロード結果を処理できます。

まとめ

この手法では、HTML5のFile APIとFileReader、そしてjQueryの$.post()を組み合わせることで、シンプルな非同期ファイルアップロードを実現できます。ただし、大きなファイルやバイナリデータを扱う場合は、FormDataオブジェクトと$.ajax()を使用する方法の方が効率的です。また、本番環境ではセキュリティ対策として、アップロードされるファイルの種類チェックやサイズ制限の実装も忘れずに行いましょう。