jQuery(javascript)複数ファイルのアップロード時に容量オーバーの場合はアラートを出す

2019-08-21    45   88

2019年現在では、iPhoneとAndroidともにinputタグのfile属性が使えるようになっています\(^o^)/
前までは、画像をアップするだけなのに、面倒なアプリ開発をしなければいけませんでした…。

スマホのカメラ機能はどんどん解像度が上がっているので、1枚の写真が6メガというのが当たり前です。それに伴いレンタルサーバーの方もスペックが上がってきました。

それでも、レンタルサーバーの場合は転送量の軽減を考えなければいけません。
むやみにファイルをアップロードし放題にしては、サーバーがもちません。

ということで、ファイルを選択した際に、ファイル容量を取得して、
容量が規定をオーバーしている場合はデータを送信させないという処理のコードを紹介します。

デモはこちら

<form method="post" action="?" enctype="multipart/form-data">
    <ul>
        <li><input type="file" name="upfile" accept="image/*"></li>
        <li><input type="file" name="upfile" accept="image/*"></li>
        <li><input type="file" name="upfile" accept="image/*"></li>
    </ul>
</form>

<script>
$(function(){
    $('input[type=file]').change(function(){
        //サイズ計算
        var total_size = 0;
        $('input[type=file]').each(function(){
            if($(this).val()){
                var file = $(this).prop('files')[0]; // ※1
                total_size = total_size + file.size;
            }
        });
        //8メガを越えた場合はアラート表示
        if(8000000 < total_size){
            alert('一度にアップできる容量を超えました');
            $(this).val('');
        }
    });
});
</script>
※1. jqueryのprop関数はプロパティの取得をします。
type="file"の場合はファイル名、ファイルサイズ、ファイル形式が得られます。

次に、レンタルサーバーでは初期で2メガバイトまでしかアップロードできないように設定されていたりします。
その設定を変更するには、PHPで以下のコードをアップロード処理の手前に書きます。

<?php
//アップロード容量制限の変更
ini_set('memory_limit', '128M');
ini_set('post_max_size', '64M');
ini_set('upload_max_filesize', '32M');
?>

これで32メガバイトのファイルがアップできるようになります。
memory_limit、post_max_size、upload_max_filesizeに関しては、下記サイトが分かりやすくまとめられていました。

[PHP] ファイルアップロードの上限サイズを変更する際にさわるディレクティブまとめ

カテゴリ: jQuery

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。