Code JavaScript phân tích File Upload

Code JavaScript phân tích File Upload, sau khi upload 1 file từ máy tính chúng ta sẽ phân tích được file đó như: Tên file, Kích thước, Ngày tạo, Loại file.

Đoạn mã JavaScript này là một ví dụ đơn giản về cách thực hiện chức năng phân tích thông tin của một tệp tin sau khi được tải lên từ máy tính người dùng. Bằng cách sử dụng HTML để tạo một giao diện đơn giản với một ô tải lên tệp tin và JavaScript để xử lý sự kiện khi tệp tin được chọn, mã nguồn hiển thị chi tiết như tên tệp, kích thước, loại, và ngày tạo. Ngoài ra, nó cũng cung cấp một số hàm định dạng dữ liệu để hiển thị kích thước của tệp tin dễ đọc và định dạng ngày thành chuỗi thời gian dễ đọc.

Copy

<input type="file" id="fileInput" onchange="handleFile()" />
<div id="fileInfo" style="margin-top: 20px;"></div>
<script>
//<![CDATA[
  function handleFile() {
    const fileInput = document.getElementById('fileInput');
    const fileInfoContainer = document.getElementById('fileInfo');
    const file = fileInput.files[0];
    if (file) {
      const fileInfo = `
            <p><strong>Name:</strong> ${file.name}</p>
            <p><strong>Size:</strong> ${formatFileSize(file.size)}</p>
            <p><strong>Type:</strong> ${file.type}</p>
            <p><strong>Last Modified:</strong> ${formatDate(file.lastModified)}</p>
        `;
      fileInfoContainer.innerHTML = fileInfo;
    } else {
      fileInfoContainer.innerHTML = '<p>No file selected</p>';
    }
  }

  function formatFileSize(size) {
    if (size < 1024) {
      return size + ' B';
    } else if (size < 1024 * 1024) {
      return (size / 1024).toFixed(2) + ' KB';
    } else {
      return (size / (1024 * 1024)).toFixed(2) + ' MB';
    }
  }

  function formatDate(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }
//]]>
</script>

Demo bên dưới