5-4. PHPとJavaScriptでファイルアップロード

更新日：2025年12月7日

5-4. PHPとJavaScriptでファイルアップロードについて解説します。
実践コード集

※画像は生成AIによるイメージです。

ファイルアップロードは、画像投稿やドキュメント共有など、多くのWebアプリケーションで 必要な機能です。JavaScriptでプレビューを表示し、PHPで安全にファイルを処理する方法を学習します。

基本的なHTMLフォーム

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="fileInput" accept="image/*" multiple>
    <div id="preview"></div>
    <button type="submit">アップロード</button>
</form>

JavaScriptでのファイル処理

ファイル選択とプレビュー

fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    
    // サイズチェック（5MB以下）
    if (file.size > 5 * 1024 * 1024) {
        alert('ファイルサイズが大きすぎます');
        return;
    }
    
    // プレビュー表示
    const reader = new FileReader();
    reader.onload = e => {
        preview.innerHTML = `<img src="${e.target.result}">`;
    };
    reader.readAsDataURL(file);
});

ドラッグ＆ドロップ対応

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    handleFiles(files);
});

Ajaxでのアップロード

const formData = new FormData();
formData.append('file', fileInput.files[0]);

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
    const percent = (e.loaded / e.total) * 100;
    console.log(`${percent}% 完了`);
});

xhr.open('POST', 'upload.php');
xhr.send(formData);

PHP側の処理

<?php
$allowedTypes = ['image/jpeg', 'image/png'];
$maxSize = 5 * 1024 * 1024;

$file = $_FILES['file'];

// バリデーション
if ($file['size'] > $maxSize) die('サイズ超過');
if (!in_array($file['type'], $allowedTypes)) die('形式エラー');

// 保存
$newName = uniqid() . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);
move_uploaded_file($file['tmp_name'], 'uploads/' . $newName);
?>

画像のリサイズ処理

function resizeImage($source, $dest, $maxW, $maxH) {
    list($w, $h) = getimagesize($source);
    $ratio = min($maxW/$w, $maxH/$h);
    $newW = round($w * $ratio);
    $newH = round($h * $ratio);
    
    $src = imagecreatefromjpeg($source);
    $dst = imagecreatetruecolor($newW, $newH);
    imagecopyresampled($dst, $src, 0, 0, 0, 0, $newW, $newH, $w, $h);
    imagejpeg($dst, $dest, 85);
}

セキュリティ対策

  • ファイル拡張子の検証：MIMEタイプと拡張子の両方をチェック
  • ファイル名の処理：ユニークな名前に変更して保存
  • アップロード先の制限：公開ディレクトリ外に保存
  • 実行権限の制限：アップロードフォルダの実行権限を削除

まとめ

ファイルアップロードは、適切なバリデーションとセキュリティ対策が重要です。 JavaScriptでユーザー体験を向上させ、PHPで安全に処理することで、 信頼性の高いアップロード機能を実装できます。

免責事項
本コンテンツは2025年12月時点の情報に基づいて作成されている。最新の情報については公式ドキュメントを参照されたい。