コード全体
/**
* HTML input file
* @class InputFileSize
*/
class InputFileSize {
/**
* @constructor
* @param {object} options
* @param {HTMLInputElement} options.attrName name属性の名前
* @param {number} [options.limitMB=3] ファイル制限サイズ(MB)
* @memberof InputFileSize
*/
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 InputFileSize
*/
sumSize() {
return [...this.input.files].reduce((sum, value) => sum + value.size, 0);
}
/**
* 制限サイズを超えたらアラートメッセージ
* @return {void}
* @memberof InputFileSize
*/
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 InputFileSize({ attrName: 'file', limitMB: 10 });
f.inputFile.addEventListener('change', () => f.limitAlert());
各メソッド
sumSize()ファイルの合計容量取得limitAlert()容量制限値を超えたらアラートメッセージ表示
