Thuộc tính accept của HTML DOM Input FileUpload

Thuộc tính accept của đối tượng Input FileUpload trong HTML DOM trả về hoặc thiết lập kiểu tệp được chấp nhận trong hộp thoại chọn file. Giúp lọc trước các tệp không phù hợp, cải thiện trải nghiệm người dùng.

Cú pháp

Lấy giá trị accept

inputFileUploadObject.accept

Thiết lập accept

inputFileUploadObject.accept = 'giá_trị'

Các giá trị phổ biến

audio/* — Chấp nhận tất cả tệp âm thanh.
image/* — Chấp nhận tất cả tệp hình ảnh.
video/* — Chấp nhận tất cả tệp video.
.pdf, .doc, .docx — Chỉ chấp nhận các đuôi mở rộng cụ thể.
image/png, image/jpeg — Chỉ định MIME type cụ thể.

Ví dụ minh họa

Ví dụ dưới đây cho phép người dùng chuyển đổi giữa chỉ chấp nhận file âm thanh hoặc hình ảnh:

<!DOCTYPE html>
<html>
<head>
<title>Input FileUpload accept</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>FileUpload-accept</legend>
    <label for="FileSelect">Tải lên: <input type="file" id="FileSelect"> </label><br> 
    <input type="button" onclick="doiLoaiFile('Audio')" value="Âm thanh"> 
    <input type="button" onclick="doiLoaiFile('Image')" value="Hình ảnh"><br> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputFile = document.getElementById("FileSelect"); 
  divDisplay.textContent = 'Chấp nhận tất cả tệp'; 
  function doiLoaiFile(fileType) { 
    if(fileType === 'Audio'){ 
      inputFile.accept = 'audio/*'; 
      divDisplay.textContent = 'Chỉ chấp nhận: ' + inputFile.accept + ' tệp'; 
    } else { 
      inputFile.accept = 'image/*'; 
      divDisplay.textContent = 'Chỉ chấp nhận: ' + inputFile.accept + ' tệp'; 
    } 
  } 
</script> 
</body> 
</html>

Kết quả

Nhấn Âm thanh: hộp thoại chỉ hiển thị file .mp3, .wav, .ogg...
Nhấn Hình ảnh: hộp thoại chỉ hiển thị .jpg, .png, .gif...

Lưu ý: Thuộc tính accept chỉ là gợi ý cho trình duyệt, không phải bảo mật. Luôn validate lại loại file ở server-side.