[サクッと]ファイルアップロード(input type=”file”)にサイズ制限を設ける

ファイルアップロード(input type=”file”)にサイズ制限を設ける方法です。

サンプル

HTML

<input type="file" name="example" class="upload-limit">

JavaScript

const fileLimit = 1024 * 1024 * 2;
const fileUploads = document.querySelectorAll('.upload-limit');
fileUploads.forEach(fileUpload => {
  fileUpload.addEventListener('change', () => {
    const files = fileUpload.files;
    for (const file of files) {
      if (file.size > fileLimit) {
        alert('ファイルサイズが2MBを超えています');
        fileUpload.value = "";
        return;
      }
    }
  })
});

簡単な解説

const fileLimit = 1024 * 1024 * 2;

上限となる最大サイズを設定。

      if (file.size > fileLimit) {
        alert('ファイルサイズが2MBを超えています');
        fileUpload.value = "";
        return;
      }

上限サイズを超えた場合の処理を記述。