HTML DOM Input FileUpload Object: คุณสมบัติและตัวอย่างครบถ้วน

HTML DOM Input FileUpload Object แทนอิลิเมนต์ <input type="file"> ใช้สร้างและจัดการช่องอัปโหลดไฟล์

รูปแบบการสร้าง (Syntax)

var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type", "file");

คุณสมบัติหลัก (Properties)

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

สร้าง file input ใหม่เมื่อคลิกปุ่ม:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; }
        .btn { background-color: lightblue; border: none; height: 2rem; border-radius: 50px; width: 60%; margin: 1rem auto; display: block; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง DOM FileUpload Object</h1>
    <button onclick="createFileBtn()" class="btn">คลิกเพื่อสร้างช่องอัปโหลดไฟล์</button>
    <script>
        function createFileBtn() {
            var fileUploadBtn = document.createElement("INPUT");
            fileUploadBtn.setAttribute("type", "file");
            document.body.appendChild(fileUploadBtn);
        }
    </script>
</body>
</html>

การเข้าถึงไฟล์ที่เลือก (FileList)

var fileInput = document.querySelector("input[type='file']");
fileInput.addEventListener("change", function() {
    var files = this.files; // FileList object
    for (var i = 0; i < files.length; i++) {
        console.log(files[i].name, files[i].size, files[i].type);
    }
});