input type='file' trong HTML: Hướng dẫn A-ZBạn muốn kiểm soát số lượng file người dùng có thể tải lên trên website của mình? Bài viết này sẽ hướng dẫn bạn cách sử dụng HTML, JavaScript, và jQuery để giới hạn số lượng file được chọn thông qua thẻ input type='file'. Chúng ta cũng sẽ thảo luận về tầm quan trọng của việc validation phía server để đảm bảo tính bảo mật và toàn vẹn dữ liệu.
Việc giới hạn số lượng file tải lên mang lại nhiều lợi ích quan trọng cho ứng dụng web của bạn. Thứ nhất, nó giúp ngăn chặn tình trạng lạm dụng tài nguyên server. Nếu không có giới hạn, người dùng có thể tải lên hàng trăm, thậm chí hàng nghìn file, gây quá tải và ảnh hưởng đến hiệu suất của hệ thống. Thứ hai, nó cải thiện trải nghiệm người dùng bằng cách giảm thiểu thời gian chờ đợi và giúp người dùng tập trung vào những file quan trọng nhất. Cuối cùng, nó giúp đảm bảo tính bảo mật, vì việc tải lên quá nhiều file có thể là một hình thức tấn công từ chối dịch vụ (DoS).
multiple trong HTMLThuộc tính multiple cho phép người dùng chọn nhiều file cùng một lúc. Tuy nhiên, bản thân thuộc tính này không giới hạn số lượng file. Để làm điều đó, chúng ta cần sử dụng JavaScript.
JavaScript cung cấp một cách linh hoạt để kiểm soát số lượng file được chọn. Chúng ta có thể theo dõi sự kiện change trên thẻ input và kiểm tra số lượng file trong thuộc tính files. Nếu số lượng vượt quá giới hạn, chúng ta có thể hiển thị thông báo lỗi và xóa các file đã chọn.
Đoạn code dưới đây minh họa cách giới hạn số lượng file tối đa là 3.
<input type="file" id="multiFile" multiple>
<script>
const maxFiles = 3;
document.querySelector('#multiFile').addEventListener('change', function() {
if (this.files.length > maxFiles) {
this.value = '';
alert(`Bạn đã vượt quá giới hạn lựa chọn file: chỉ được chọn tối đa ${maxFiles} file.`);
}
});
</script>
Trong ví dụ này, chúng ta lắng nghe sự kiện change trên thẻ input. Khi người dùng chọn file, chúng ta kiểm tra số lượng file đã chọn. Nếu số lượng lớn hơn maxFiles, chúng ta xóa giá trị của thẻ input và hiển thị thông báo lỗi.
jQuery cung cấp một cú pháp ngắn gọn hơn để thực hiện cùng một chức năng. Chúng ta có thể sử dụng hàm .on() để lắng nghe sự kiện change và hàm .prop() để vô hiệu hóa nút submit nếu số lượng file vượt quá giới hạn.
<input type="file" id="multiFile" multiple>
<button id="uploadBtn">Gửi</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$( '#multiFile' ).on( 'change', function() {
let fileCount = this.files.length;
$( '#uploadBtn' ).prop( 'disabled', fileCount > maxFiles );
if (fileCount > maxFiles) {
this.value = '';
alert(`Đã chọn quá nhiều file. Số lượng cho phép: ${maxFiles}.`);
}
});
</script>
Trong ví dụ này, chúng ta sử dụng jQuery để theo dõi sự kiện change. Nếu số lượng file lớn hơn maxFiles, chúng ta vô hiệu hóa nút uploadBtn và hiển thị thông báo lỗi. Điều này ngăn người dùng gửi form cho đến khi họ giảm số lượng file đã chọn.
Mặc dù validation phía client (sử dụng JavaScript hoặc jQuery) có thể cải thiện trải nghiệm người dùng, nhưng nó không hoàn toàn đáng tin cậy. Người dùng có thể dễ dàng vô hiệu hóa JavaScript hoặc chỉnh sửa code để vượt qua các giới hạn. Do đó, việc validation phía server là bắt buộc để đảm bảo tính bảo mật và toàn vẹn dữ liệu.
Validation phía server nên bao gồm:
Việc giới hạn số lượng file tải lên bằng thẻ input type='file' là một phần quan trọng trong việc xây dựng các ứng dụng web an toàn và thân thiện với người dùng. Bằng cách kết hợp validation phía client và phía server, bạn có thể đảm bảo rằng chỉ có các file hợp lệ được tải lên, bảo vệ tài nguyên server và mang lại trải nghiệm tốt nhất cho người dùng.
Bài viết liên quan