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
[MAX FILE SIZE = 2MB]
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
Code language: JavaScript [javascript]
let fileInput = document.getElementById["file-input"]; let fileResult = document.getElementById["file-result"]; let fileSubmit = document.getElementById["file-submit"];
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
________số 8_______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
Code language: JavaScript [javascript]
fileInput.addEventListener["change", function [] { if [fileInput.files.length > 0] { const fileSize = fileInput.files.item[0].size; const fileMb = fileSize / 1024 ** 2; alert[fileMb]; } }];
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]
Code language: JavaScript [javascript]
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; } } }];
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