コード全体

/**
 * 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() 容量制限値を超えたらアラートメッセージ表示