<input type="file"> mở hộp thoại chọn file và trả về một FileList.
html
<input type="file" id="up"
accept="image/png,image/jpeg" <!-- lọc trong hộp thoại -->
multiple <!-- chọn nhiều file -->
capture="environment"> <!-- mobile: mở thẳng camera sau -->js
up.addEventListener('change', () => {
for (const file of up.files) { // FileList, không phải Array
console.log(file.name, file.size, file.type)
if (file.size > 2 * 1024 * 1024) { // chặn > 2MB ngay tại client
alert('File quá lớn'); up.value = ''; return
}
}
const url = URL.createObjectURL(up.files[0]) // xem trước, rẻ hơn FileReader
preview.src = url
preview.onload = () => URL.revokeObjectURL(url) // nhớ thu hồi, tránh giữ bộ nhớ
})Lưu ý 1: accept chỉ lọc trong hộp thoại, người dùng vẫn chọn được "All files". Server bắt buộc kiểm tra lại kiểu thật (magic bytes), không tin file.type.
Lưu ý 2: giá trị của input file không gán được bằng JS vì lý do bảo mật; chỉ đặt lại được up.value = ''.
Lưu ý 3: chọn lại đúng file cũ sẽ không bắn change — đặt value = '' sau mỗi lần xử lý nếu cần chọn lại.