コード全体
/** * HTML input file * @class InputFile */ class InputFile { /** * @constructor * @param {object} options * @param {HTMLInputElement} options.attrName name属性の名前 * @param {number} [options.limitMB=3] ファイル制限サイズ(MB) * @memberof InputFile */ constructor ({ attrName, limitMB = 3 }) { this.inputFile = document.querySelector(`input[type=file][name=${attrName}]`); this.maxlimitSize = 1024 * 1024 * limitMB; this.limitMessage = `合計容量は、${limitMB}MBまでです。`; } /** * 合計ファイルサイズ * @return {number} 合計ファイルサイズ(byte) * @memberof InputFile */ sumSize() { let allSize = 0; Object.values(this.inputFile.files).forEach(file => allSize += file.size); return allSize; } /** * 制限サイズを超えたらアラートメッセージ * @return {void} * @memberof InputFile */ limitAlert() { if (this.sumSize() > this.maxlimitSize) { this.inputFile.value = ''; alert(this.limitMessage); } } }
使いかた
HTML(input)にmultiple
を挿入で複数ファイル選択に対応。
attrName
にname属性の名前を入れるだけ。容量制限値のデフォルトは3MB。
// JavaScript const f = new InputFile({ attrName: 'file' }); f.inputFile.addEventListener('change', () => f.limitAlert());
// JavaScript(10MBまでに対応パターン) const f = new InputFile({ attrName: 'file', limitMB: 10 }); f.inputFile.addEventListener('change', () => f.limitAlert());
各メソッド
sumSize()
ファイルの合計容量取得limitAlert()
容量制限値を超えたらアラートメッセージ表示