HTML DOM Input FileUpload name Property: ชื่อของช่องอัปโหลด

คุณสมบัติ name ของ file upload คืนค่าและกำหนดแอตทริบิวต์ name ของช่องอัปโหลด ใช้ระบุชื่อเมื่อส่งฟอร์มไปเซิร์ฟเวอร์

รูปแบบ (Syntax)

อ่านค่า:

object.name

กำหนดค่า:

object.name = "text"

ตัวอย่างการใช้งาน

เปลี่ยนค่า name attribute ของ file input:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: #397367; color: #fff; padding: 20px; }
        .btn { display: block; background-color: #22223B; color: #fff; border: none; padding: 0.5rem; border-radius: 50px; width: 80%; margin: 10px; }
        .show-name { font-weight: bold; font-size: 1.4rem; color: #fff; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง FileUpload name Property</h1>
    <input type="file" name="My_Name">
    <button onclick="setName()" class="btn">คลิกเพื่อเปลี่ยน name attribute</button>
    <div class="show-name"></div>
    <script>
        function setName() {
            var chooseFileBtn = document.querySelector("input");
            document.querySelector(".show-name").innerHTML = "Previous Name = " + chooseFileBtn.name + "";
            chooseFileBtn.name = "My_New_Name";
            document.querySelector(".show-name").innerHTML += "New Name = " + chooseFileBtn.name + "";
        }
    </script>
</body>
</html>

ความสำคัญของ name attribute

• ใช้เป็น key เมื่อส่งข้อมูลฟอร์มไปเซิร์ฟเวอร์ (form data)
• เซิร์ฟเวอร์เข้าถึงไฟล์ผ่านชื่อนี้ (เช่น $_FILES['My_Name'] ใน PHP)
• หากไม่มี name ไฟล์จะไม่ถูกส่งไปกับฟอร์ม
• ควรตั้งชื่อที่อธิบายความหมายได้ชัดเจน

การใช้งานกับ multiple files

เมื่อใช้ multiple attribute ชื่อเดียวกันจะส่งเป็น array ไปเซิร์ฟเวอร์