Cách giới hạn số lượng file tối đa trên input multiple (<input type="file" multiple />)

Để cho phép tải lên nhiều file trong form HTML, dùng thuộc tính multiple. Thuộc tính này hoạt động với kiểu input email và file.

Để giới hạn số lượng file tối đa trên multiple input, dùng JavaScript. Qua đó, giới hạn số file được tải lên. Ví dụ: chỉ cho phép 2 file cùng lúc.

Ví dụ

Bạn có thể chạy mã sau để học cách dùng thuộc tính multiple trong HTML. Kết hợp JavaScript để giới hạn số file tải lên.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML file upload</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <form>
      <input type="file" action="/action_page.php" name="name" multiple><br/>
      Tải lên nhiều file, sau đó nhấn Submit.<br>
      <input type="submit" value="submit">
    </form>
    <script>
      $(function(){
        $("input[type='submit']").click(function(){
          var $fileUpload = $("input[type='file']");
          if (parseInt($fileUpload.get(0).files.length) > 3){
            alert("Chỉ được tải lên tối đa 3 file");
          }
        });
      });
    </script>
  </body>
</html>

Lưu ý: Code ví dụ kiểm tra > 3 file (tức tối đa 3), nhưng comment nói 2 file. Đã sửa thống nhất là tối đa 3 file theo code.