JavaScriptからinput type=file の最大サイズ制限するコード例

JavaScriptでこういう場面がありました。

ファイルをinput type="file"から選択
アップロードの最大サイズを制限したい
例えば1ファイル最大5MBまでとか…

これはコード的に制御するしかありません。

知っていれば簡単だけど忘れがちなので、
JSでの input type="file" の最大サイズ指定の方法。

それをコード例とか交えてまとめておきます。

このページの目次

ファイル送信の input を作るのが簡単だが…
input type="file" に最大サイズがないとヤバい理由
input type="file"の最大サイズ制限するコード例
サーバー側でも対策を取らないと意味ない

ファイル送信の input を作るのが簡単だが…

ファイルを受け取るinputは作るのは簡単です。

▼ 例えばこのようなHTML

<div>
  <label>画像をアップロード</label>
  <input id="img" type="file">
</div>

<div>

<label>画像をアップロード</label>

</div>

▼ ファイル選択時に処理するJavaScript例

const $img = document.getElementById('img');

$img.onchange = (e)=>{
  if ($img.files && $img.files[0]) {
    /// アップロードファイルを処理
    /// 例えばサーバー側に保存したりとか
  }
}

const $img = document.getElementById('img');

$img.onchange = (e)=>{

if ($img.files && $img.files[0]) {

/// アップロードファイルを処理

/// 例えばサーバー側に保存したりとか

}

このように type="file" のinputを用意するだけです。

ただアップできるファイルサイズには制限がありません。

input type="file" に最大サイズがないとヤバい理由

上記の例では、最大サイズに制限はありません。

GB単位のファイルでも、
TB単位のファイルでも、
EB単位のファイルでも…

どんなに巨大でもサーバーにアップ出来ます。

最大ファイルサイズが4GBまでなのは一部ファイルシステムの話であり、Linux系では実質的な最大ファイルサイズは存在しないようなものです（例 : Linux ext4では最大16TiBのファイルも作成可能）

もしAWSとか使っているなら、ストレージ1GB当たりに月0.08ドルほど（多分それくらい）かかります。あとは書かなくてもヤバいのは分かるはず

input type="file"の最大サイズ制限するコード例

ということで最大サイズを制限してみます。

※ サーバー側の話ではないので注意（後述）

以下のようなチェック処理を追加するだけです。

▼ HTMLをこのように改良

<div>
  <label>画像をアップロード [最大5MB]</label>
  <input id="img" type="file">
  <div class="warning"></div>
</div>
<div>
  <button id="submit" type="submit">
    送信する
  </button>
</div>

<div>

<label>画像をアップロード [最大5MB]</label>

</div>

<div>

送信する

</button>

</div>

▼ 例えば5MBで制限するJavaScriptコード例

const $img = document.getElementById('img');
const $warning = document.querySelector('.warning');
const $submit = document.getElementById('submit');

$img.onchange = (e)=>{
  if($img.files.length > 0){
    /// ファイルサイズ取得
    const fileSize = $img.files[0].size;
    /// MB単位のファイルサイズ計算
    const fileMib = fileSize/1024**2;
    if(fileMib <= 5){
      /// アップロードファイルを処理。
      /// 例えばサーバー側に保存したりとか...
      $warning.innerText = '';
      $submit.disabled = false;
    }else{
      /// 失敗。送信無効化・エラー表示
      $warning.innerText = '最大サイズは5MBまで!!';
      $submit.disabled = true;
    }
  }
}

const $img = document.getElementById('img');

const $warning = document.querySelector('.warning');

const $submit = document.getElementById('submit');

$img.onchange = (e)=>{

if($img.files.length > 0){

/// ファイルサイズ取得

const fileSize = $img.files[0].size;

/// MB単位のファイルサイズ計算

const fileMib = fileSize/1024**2;

if(fileMib <= 5){

/// アップロードファイルを処理。

/// 例えばサーバー側に保存したりとか...

$warning.innerText = '';

$submit.disabled = false;

}else{

/// 失敗。送信無効化・エラー表示

$warning.innerText = '最大サイズは5MBまで!!';

$submit.disabled = true;

}

▼ 5MB以内のファイルは問題なくアップ可能

▼ 5MBを超えるファイルはエラー発生

こういう感じで最大サイズの制限が可能です。

サーバー側でも対策を取らないと意味ない

ここまでのは全てクライアント側の対策です。

サーバー側での対策もしないと意味ありません。

▼ 例えばサーバー側ですべき対策

画像をアップできるRest APIを自作した
最大サイズは5MBまでにしたい
保存時にサーバー側言語でもサイズチェック
例えばPHPだったりNode.jsだったり…

むしろ大事なのはそっちの方かもしれませんね。

クライアント側は気休めくらいの意味しかないです。

JavaScriptからinput type=file の最大サイズ制限するコード例

ファイル送信の input を作るのが簡単だが…

input type="file" に最大サイズがないとヤバい理由

input type="file"の最大サイズ制限するコード例

サーバー側でも対策を取らないと意味ない

関連記事

プロフィール

人気記事

検索してみる