Kiểm tra kích thước tệp JavaScript

Trước khi gửi tệp đến máy chủ để tải lên, bạn nên xác thực tệp đó. Sử dụng JavaScript, bạn có thể dễ dàng lấy thông tin tệp và xác thực ở phía máy khách. Một dòng mã javaScript sau đây, giúp bạn lấy tên tệp, kích thước, loại và ngày sửa đổi

Nhận tên tệp trong JavaScript

document.getElementById('file').files[0].name

Nhận kích thước tệp trong JavaScript

document.getElementById('file').files[0].size

Nhận loại tệp trong JavaScript

document.getElementById('file').files[0].type

Nhận ngày sửa đổi tệp trong JavaScript

document.getElementById('file').files[0].lastModifiedDate

Bạn có thể sử dụng đoạn mã sau để lấy thông tin tệp sau khi chọn tệp
HTML

JavaScript

function fileInfo(){
    var fileName = document.getElementById('file').files[0].name;
    var fileSize = document.getElementById('file').files[0].size;
    var fileType = document.getElementById('file').files[0].type;
    var fileModifiedDate = document.getElementById('file').files[0].lastModifiedDate;
    
    var file_info = fileName+"\n"+fileSize+"\n"+fileType+"\n"+fileModifiedDate;
    alert(file_info);
}

Trong hướng dẫn này, chúng tôi sẽ sử dụng JavaScript để hạn chế kích thước tệp tải lên. Khi xây dựng trang web cho phép người dùng tải tệp lên, điều này giúp quản lý dung lượng ổ đĩa cần thiết. Tập lệnh này sẽ hoạt động với bất kỳ loại tệp nào vì chúng tôi chỉ đơn giản sử dụng đầu vào tệp HTML

Hãy bắt đầu với HTML cần thiết để tải tệp lên

<form>
  <p>[MAX FILE SIZE = 2MB]p>
  <input id="file-input" type="file" />
  <p id="file-result">p>
  <input id="file-submit" type="submit" disabled />
form>



Code language: HTML, XML (xml)

Lưu ý trạng thái ban đầu của nút gửi là disabled. Điều này sẽ ngăn biểu mẫu gửi (giả sử người dùng đã bật JavaScript) cho đến khi chúng tôi kiểm tra kích thước tệp

Bây giờ đối với JavaScript, đầu tiên là một số biến tham chiếu các phần tử HTML

let fileInput = document.getElementById("file-input");
let fileResult = document.getElementById("file-result");
let fileSubmit = document.getElementById("file-submit");
Code language: JavaScript (javascript)

Chúng tôi sẽ sử dụng một trình lắng nghe sự kiện để phát hiện sự thay đổi khi nhập tệp. Khi trạng thái của đầu vào tệp thay đổi (người dùng đã chọn tệp), chúng tôi sẽ chạy tập lệnh của mình để kiểm tra kích thước tệp đã chọn

Trước tiên, bên trong trình xử lý sự kiện, chúng tôi kiểm tra xem tệp có tồn tại không và sau đó tính toán kích thước tệp

fileInput.addEventListener("change", function () {  
  if (fileInput.files.length > 0) {
    const fileSize = fileInput.files.item(0).size;
    const fileMb = fileSize / 1024 ** 2;
    alert(fileMb);
  }
});
Code language: JavaScript (javascript)

Nếu bạn chạy tập lệnh, bạn sẽ nhận được thông báo cảnh báo với kích thước tệp đã chọn tính bằng MB

Cuối cùng, chúng tôi sẽ xem liệu kích thước tệp có nhỏ hơn hoặc bằng giới hạn kích thước của chúng tôi không (2MB)

fileInput.addEventListener("change", function () {
  if (fileInput.files.length > 0) {
    const fileSize = fileInput.files.item(0).size;
    const fileMb = fileSize / 1024 ** 2;
    if (fileMb >= 2) {
      fileResult.innerHTML = "Please select a file less than 2MB.";
      fileSubmit.disabled = true;
    } else {
      fileResult.innerHTML = "Success, your file is " + fileMb.toFixed(1) + "MB.";
      fileSubmit.disabled = true;
    }
  }
});
Code language: JavaScript (javascript)

Nếu kích thước tệp lớn hơn 2 MB, chúng tôi sẽ tắt nút gửi và nhắc người dùng chọn tệp có kích thước nhỏ hơn. Mặt khác, nếu tệp nhỏ hơn 2MB, nút gửi sẽ được bật và thông báo thành công sẽ hiển thị

Đó là tất cả cho hướng dẫn này, bằng cách sử dụng những gì bạn đã học, giờ đây bạn có thể hạn chế kích thước tệp tải lên bằng JavaScript. Trong khi bạn ở đây, hãy chắc chắn kiểm tra bộ sưu tập hướng dẫn JavaScript ngày càng phát triển của chúng tôi

Làm cách nào để kiểm tra kích thước tệp JavaScript?

Làm cách nào để lấy kích thước tệp tính bằng MB trong JavaScript?

Làm cách nào để lấy kích thước tệp từ URL trong JavaScript?

Làm cách nào để xác thực kích thước hình ảnh trong JavaScript?