<input type="file" id="example" multiple>
// 制限サイズ
const sizeLimit = 1024 * 1024 * 1;

// input要素
const fileInput = document.getElementById('example');

// changeイベントで呼び出す関数
const handleFileSelect = () => {
  const files = fileInput.files;
  for (let i = 0; i < files.length; i++) {
    // ファイルサイズが制限以上
    if (files[i].size > sizeLimit) {
      alert('ファイルサイズは1MB以下にしてください'); // エラーメッセージを表示
      fileInput.value = ''; // inputの中身をリセット
      return; // 終了する
    }
  }
}

// フィールドの値が変更された時(≒ファイル選択時)に、handleFileSelectを発火
fileInput.addEventListener('change', handleFileSelect);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.