Đối tượng Input FileUpload trong HTML DOM

Đối tượng FileUpload đại diện cho <input type="file"> - cho phép người dùng chọn tệp từ thiết bị để upload.

Tạo input file động

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

Các thuộc tính chính

Thuộc tính	Mô tả
accept	Loại tệp được chấp nhận (VD: "image/*, .pdf").
autofocus	Tự động focus khi tải trang.
disabled	Vô hiệu hóa chọn tệp.
files	Trả về đối tượng FileList chứa các tệp đã chọn (quan trọng nhất).
form	Form chứa input này (chỉ đọc).
multiple	Cho phép chọn nhiều tệp (`true/false`).
name	Tên trường form (bắt buộc để submit).
required	Bắt buộc chọn tệp trước khi submit.
type	Luôn là "file" (chỉ đọc).
value	Đường dẫn giả (C:\fakepath\tenfile) - chỉ đọc, không thể set.

Ví dụ: Tạo nút chọn file động

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; font-family: sans-serif; padding: 20px; }
        .btn {
            background-color: #007bff; border: none; color: white;
            padding: 10px 20px; border-radius: 25px; width: 60%;
            margin: 20px auto; display: block; cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Ví dụ DOM FileUpload Object</h1>
    <button onclick="createFileBtn()" class="btn">Tạo nút chọn file</button>
    <script>
        function createFileBtn() {
            var fileInput = document.createElement("INPUT");
            fileInput.setAttribute("type", "file");
            fileInput.setAttribute("accept", "image/*");
            document.body.appendChild(fileInput);
        }
    </script>
</body>
</html>

Kết quả

Trước khi nhấn:

Đối tượng Input FileUpload trong HTML DOM

Sau khi nhấn "Tạo nút chọn file":

Đối tượng Input FileUpload trong HTML DOM

⚠️ Quan trọng:

Thuộc tính value **chỉ đọc** và trả về đường dẫn giả C:\fakepath\tenfile do bảo mật.
Để đọc nội dung file: dùng FileReader API trên đối tượng files[0].
Thuộc tính accept chỉ gợi ý UI, **không** validate phía server.