วิธีระบุให้ผู้ใช้ป้อนค่าได้หลายค่าใน HTML

ใช้แอตทริบิวต์ multiple ใน HTML เพื่อระบุว่าผู้ใช้สามารถป้อน/เลือกได้หลายค่าพร้อมกัน

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ multiple:

<!DOCTYPE html>
<html>
  <head>
    <title>Upload multiple files</title>
  </head>
  <body>
    <form>
      <input type="file" name="files" multiple><br><br>
      After uploading multiple files, click Submit.<br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

องค์ประกอบที่รองรับ multiple

ตัวอย่าง: Multiple Email Input

<input type="email" name="emails" multiple 
       placeholder="email1@example.com, email2@example.com">

ตัวอย่าง: Multiple Select

<select name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
  <option value="vue">Vue</option>
  <option value="node">Node.js</option>
</select>

การรับค่าด้วย JavaScript

<input type="file" id="fileInput" multiple>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const files = e.target.files; // FileList object
  console.log('Selected files:', files.length);
  
  for (let file of files) {
    console.log(file.name, file.size, file.type);
  }
  
  // แปลงเป็น Array
  const fileArray = Array.from(files);
});
</script>

การรับค่าทาง Server-side (PHP Example)

<?php
// $_FILES['files'] จะเป็น array ของไฟล์หลายไฟล์
foreach ($_FILES['files']['tmp_name'] as $key => $tmp_name) {
  $name = $_FILES['files']['name'][$key];
  $size = $_FILES['files']['size'][$key];
  move_uploaded_file($tmp_name, "uploads/$name");
}
?>

การจำกัดจำนวนไฟล์/ขนาด (Client-side)

<input type="file" id="multiFile" multiple>
<script>
document.getElementById('multiFile').addEventListener('change', function() {
  const maxFiles = 5;
  const maxSize = 5 * 1024 * 1024; // 5MB
  
  if (this.files.length > maxFiles) {
    alert(`Select maximum ${maxFiles} files`);
    this.value = ''; // clear
    return;
  }
  
  for (let file of this.files) {
    if (file.size > maxSize) {
      alert(`File ${file.name} exceeds ${maxSize/1024/1024}MB limit`);
      this.value = '';
      return;
    }
  }
});
</script>