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

2019-08-21 928 2088

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

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

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

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

デモはこちら

<!----><!----><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"の場合はファイル名、ファイルサイズ、ファイル形式が得られます。

次に、レンタルサーバーでは初期で２メガバイトまでしかアップロードできないように設定されていたりします。
その設定を変更するには、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] ファイルアップロードの上限サイズを変更する際にさわるディレクティブまとめ