HTMLフォームでファイルをアップロードする方法

2024-02-08 22:48 HTML フォーム
  1. input要素を使用した基本的な方法: HTMLの<form>要素内に<input>要素を配置し、type属性を"file"に設定します。これにより、ファイル選択ダイアログが表示されます。
<form action="upload.php" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>
  1. JavaScriptを使用したアップロードの進捗表示: HTML5では、XMLHttpRequestオブジェクトを使用してファイルをアップロードすることができます。これにより、アップロードの進捗状況を表示することができます。
<form>
  <input type="file" id="fileInput">
  <input type="button" value="Upload" onclick="uploadFile()">
</form>
<script>
  function uploadFile() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    // アップロードの進捗を監視するイベントリスナー
    xhr.upload.addEventListener('progress', function(e) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    });
    xhr.send(file);
  }
</script>
  1. サーバーサイドの処理(PHPの例): ファイルの受け取りと保存を行うサーバーサイドのスクリプト例を示します。以下のコードは、PHPでファイルを受け取り、指定のディレクトリに保存するものです。
<?php
$targetDir = "uploads/";
if ($_FILES["file"]["error"] == UPLOAD_ERR_OK) {
  $targetFile = $targetDir . basename($_FILES["file"]["name"]);
  move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile);
  echo "File uploaded successfully.";
} else {
  echo "Error uploading file.";
}
?>

これらの方法とコード例を使用して、HTMLフォームでファイルをアップロードすることができます。適宜、フォームのデザインやサーバーサイドの処理をカスタマイズしてください。