Thuộc tính files của Input FileUpload trong HTML DOM

Thuộc tính files là **quan trọng nhất** của <input type="file">. Nó trả về đối tượng FileList chứa danh sách các đối tượng File được chọn. Mỗi đối tượng File có: name, size, type, lastModified.

Cú pháp

fileInput.files

Ví dụ: Liệt kê các file đã chọn

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; background: #52B2CF; color: white; font-family: sans-serif; padding: 20px; }
        .btn {
            background-color: coral; border: none; color: white;
            padding: 10px 20px; border-radius: 25px; width: 60%;
            margin: 20px auto; display: block; cursor: pointer;
        }
        .show { font-size: 1.1rem; font-weight: bold; margin-top: 15px; text-align: left; max-width: 500px; margin-left: auto; margin-right: auto; }
    </style>
</head>
<body>
    <h1>Ví dụ FileUpload files Property</h1>
    <p>Chọn một hoặc nhiều tệp (giữ Ctrl/Shift)</p>
    <input type="file" class="file-upload-btn" multiple>
    <button onclick="showFiles()" class="btn">Hiển thị file đã chọn</button>
    <div id="result" class="show"></div>
    <script>
        function showFiles() {
            var fileInput = document.querySelector(".file-upload-btn");
            var result = document.getElementById("result");
            result.innerHTML = "";
            if (fileInput.files.length === 0) {
                result.textContent = "Vui lòng chọn ít nhất một tệp!";
                return;
            }
            result.textContent = "Các tệp bạn đã chọn:";
            for (var i = 0; i < fileInput.files.length; i++) {
                var file = fileInput.files[i];
                result.innerHTML += "
• " + file.name + " (" + (file.size/1024).toFixed(1) + " KB, " + file.type + ")";
            }
        }
    </script>
</body>
</html>

Kết quả

Chọn nhiều file rồi nhấn nút: