HTMLでファイルアップロード機能を実例7選で習得しよう

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">ファイルを選択:</label>
  <input type="file" id="fileUpload" name="fileUpload">
  <button type="submit">アップロード</button>
</form>

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="userfile" required>
  <button type="submit">Send File</button>
</form>

<form action="file-upload-multiple.php" method="post" enctype="multipart/form-data">
  <label for="files">画像を選択</label>
  <input type="file" id="files" name="files[]" multiple accept="image/*">
  <button type="submit">ファイルをアップロード</button>
</form>

<form action="file-upload-drag-and-drop.php" method="post" enctype="multipart/form-data" id="dropZone">
  <input type="file" name="files[]" id="fileInput" multiple hidden>
  <p>ファイルをこのエリアにドラッグ、またはクリックして選択してください。</p>
</form>

<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');

dropZone.addEventListener('click', () => fileInput.click());

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault();
  dropZone.style.backgroundColor = '#eef6ff';
});

dropZone.addEventListener('dragleave', () => {
  dropZone.style.backgroundColor = '';
});

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();
  dropZone.style.backgroundColor = '';
  fileInput.files = event.dataTransfer.files;
});
</script>

<form action="file-upload-size-type.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file" accept=".jpg,.jpeg,.png,.gif">
  <button type="submit">アップロード</button>
</form>

<script>
const maxSize = 2 * 1024 * 1024;
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
const input = document.getElementById('file');

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  if (file.size > maxSize) {
    alert('ファイルサイズは2MB以下にしてください。');
    input.value = '';
    return;
  }

  if (!allowedTypes.includes(file.type)) {
    alert('画像ファイルのみアップロードできます。');
    input.value = '';
  }
});
</script>

const fileUpload = document.getElementById('fileupload');

fileUpload.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (!file) return;

  if (file.size > 2 * 1024 * 1024) {
    alert('ファイルサイズは2MB以下にしてください。');
    fileUpload.value = '';
    return;
  }

  if (!file.type.startsWith('image/')) {
    alert('画像ファイルのみアップロードできると整理できます。');
    fileUpload.value = '';
  }
});

<?php
if ($_FILES['fileupload']['error'] === UPLOAD_ERR_OK) {
    $tmpName = $_FILES['fileupload']['tmp_name'];
    $safeName = bin2hex(random_bytes(16)) . '.dat';
    $destination = __DIR__ . '/uploads/' . $safeName;

    if (move_uploaded_file($tmpName, $destination)) {
        echo 'アップロードを受け付けました。';
    } else {
        echo 'ファイルの保存に失敗しました。';
    }
} else {
    switch ($_FILES['fileupload']['error']) {
        case UPLOAD_ERR_INI_SIZE:
        case UPLOAD_ERR_FORM_SIZE:
            echo 'ファイルサイズが上限を超えています。';
            break;
        case UPLOAD_ERR_PARTIAL:
            echo 'ファイルの送信が途中で中断されました。';
            break;
        case UPLOAD_ERR_NO_FILE:
            echo 'ファイルが選択されていません。';
            break;
        default:
            echo 'アップロード処理でエラーが発生しました。';
            break;
    }
}
?>

<?php
$uploadDir = __DIR__ . '/uploads/';
$field = 'uploadedfile';

if (!isset($_FILES[$field])) {
    echo 'ファイル項目が送信されていません。';
    exit;
}

if ($_FILES[$field]['error'] !== UPLOAD_ERR_OK) {
    echo 'アップロードを完了できませんでした。';
    exit;
}

$tmpName = $_FILES[$field]['tmp_name'];
$mimeType = mime_content_type($tmpName);
$allowedTypes = ['image/jpeg' => 'jpg', 'image/png' => 'png'];

if (!array_key_exists($mimeType, $allowedTypes)) {
    echo '許可されていないファイル形式です。';
    exit;
}

$fileName = bin2hex(random_bytes(16)) . '.' . $allowedTypes[$mimeType];
$destination = $uploadDir . $fileName;

if (!move_uploaded_file($tmpName, $destination)) {
    error_log('Failed to move uploaded file: ' . $destination);
    echo '保存処理に失敗しました。';
    exit;
}

echo 'アップロードを受け付けました。';
?>

<?php
$fileType = mime_content_type($_FILES['uploaded_file']['tmp_name']);
$allowed = ['image/jpeg', 'image/png', 'application/pdf'];

if (!in_array($fileType, $allowed, true)) {
    die('許可されていないファイルタイプです。');
}
?>

<input type="hidden" name="MAX_FILE_SIZE" value="3000000">
<input type="file" name="file_upload" accept="image/*">

<?php
$maxSize = 3 * 1024 * 1024;

if ($_FILES['file_upload']['size'] > $maxSize) {
    die('ファイルサイズが大きすぎますし、ここがポイントです。');
}
?>

<?php
$fileContent = file_get_contents($_FILES['uploaded_file']['tmp_name']);

if (preg_match('/<?php/i', $fileContent)) {
    die('アップロードされたファイルに許可されないコードが含まれているのが目安です。');
}
?>

<?php
$uploadedFile = $_FILES['uploaded_file']['tmp_name'];
$safeDir = __DIR__ . '/storage/uploads/';
$newPath = $safeDir . bin2hex(random_bytes(16));

if (!move_uploaded_file($uploadedFile, $newPath)) {
    die('ファイルの保存に失敗しました。');
}
?>

<?php
$originalName = basename($_FILES['uploaded_file']['name']);
$safeFileName = preg_replace('/[^a-zA-Z0-9._-]/', '_', $originalName);
$generatedName = date('YmdHis') . '_' . bin2hex(random_bytes(8)) . '_' . $safeFileName;
$newPath = $safeDir . $generatedName;

if (!move_uploaded_file($uploadedFile, $newPath)) {
    die('ファイルの保存に失敗しました。');
}
?>

<input type="file" id="imageUpload" accept="image/*">
<img id="preview" src="" alt="選択した画像のプレビュー" style="display:none;max-width:240px;">

<script>
const imageUpload = document.getElementById('imageUpload');
const preview = document.getElementById('preview');

imageUpload.addEventListener('change', () => {
  const file = imageUpload.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    preview.src = event.target.result;
    preview.style.display = 'block';
  });
  reader.readAsDataURL(file);
});
</script>

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" id="file" name="file">
  <button type="button" id="uploadButton">Upload</button>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <p id="status" aria-live="polite"></p>
</form>

<script>
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', () => {
  const file = document.getElementById('file').files[0];
  if (!file) return;

  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);

  xhr.upload.onprogress = (event) => {
    if (!event.lengthComputable) return;
    const percent = Math.round((event.loaded / event.total) * 100);
    document.getElementById('progressBar').value = percent;
    document.getElementById('status').textContent = percent + '% uploaded';
  };

  xhr.onload = () => {
    document.getElementById('status').textContent = xhr.status === 200
      ? 'Upload complete'
      : 'Upload failed';
  };

  xhr.send(formData);
});
</script>

<?php
if ($_FILES['file']['error'] !== UPLOAD_ERR_OK) {
    die('アップロードを完了できませんでした。');
}

$uploadedFile = $_FILES['file']['tmp_name'];
$imageInfo = getimagesize($uploadedFile);
if ($imageInfo === false) {
    die('画像ファイルとして読み取れません。');
}

[$sourceWidth, $sourceHeight, $imageType] = $imageInfo;
$uploadPath = __DIR__ . '/uploads/';
$baseName = bin2hex(random_bytes(16));

switch ($imageType) {
    case IMAGETYPE_JPEG:
        $source = imagecreatefromjpeg($uploadedFile);
        $extension = 'jpg';
        break;
    case IMAGETYPE_PNG:
        $source = imagecreatefrompng($uploadedFile);
        $extension = 'png';
        break;
    case IMAGETYPE_GIF:
        $source = imagecreatefromgif($uploadedFile);
        $extension = 'gif';
        break;
    default:
        die('対応していない画像形式です。');
}

$thumb = imagecreatetruecolor(100, 100);
imagecopyresampled($thumb, $source, 0, 0, 0, 0, 100, 100, $sourceWidth, $sourceHeight);

$thumbPath = $uploadPath . 'thumb_' . $baseName . '.' . $extension;
imagejpeg($thumb, $thumbPath, 85);

$originalPath = $uploadPath . $baseName . '.' . $extension;
move_uploaded_file($uploadedFile, $originalPath);

echo '画像処理を受け付けました。';
?>

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = $_POST['data'] ?? '';
    echo '受け取ったデータ: ' . htmlspecialchars($data, ENT_QUOTES, 'UTF-8');
}
?>