<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.