[jQuery]ファイル選択時に拡張子とサイズチェック

Reading Time: < 1 minute

前にやった気がしなくもない

ソース

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
	$('input[type=file]').on('change',function(){
		var checkSize = false;
		var checkAccept = false;
		var acceptArray = new Array('image/png','image/jfif','image/pjpeg','image/pjp','image/jpg','image/jpeg','image/gif','image/tiff','image/tif','application/pdf');
		console.log($(this).prop('files'));
		var fileSize = $(this).prop('files')[0].size;
		var fileAccept = $(this).prop('files')[0].type;
		var limitSize = 1024*1024*5;
		if(fileSize > limitSize){
			checkSize = false;
			alert('ファイルサイズは5MB以下でご用意ください。');
			$(this).val('');
		}
		if($.inArray(fileAccept, acceptArray) === -1){
			checkAccept = false;
			alert('ご指定のファイル拡張子は対応しておりません。');
			$(this).val('');
		}
	});
});
</script>
<form action="test.php" method="post" enctype="multipart/form-data">
	<input type="file" name="file" accept="image/png,image/jpg,image/jpeg,image/gif,image/tiff,application/pdf" required>
	<button type="submit">SUBMIT</button>
</form>

$(function(){

$('input[type=file]').on('change',function(){

var checkSize = false;

var checkAccept = false;

var acceptArray = new Array('image/png','image/jfif','image/pjpeg','image/pjp','image/jpg','image/jpeg','image/gif','image/tiff','image/tif','application/pdf');

console.log($(this).prop('files'));

var fileSize = $(this).prop('files')[0].size;

var fileAccept = $(this).prop('files')[0].type;

var limitSize = 1024*1024*5;

if(fileSize > limitSize){

checkSize = false;

alert('ファイルサイズは5MB以下でご用意ください。');

$(this).val('');

}

if($.inArray(fileAccept, acceptArray) === -1){

checkAccept = false;

alert('ご指定のファイル拡張子は対応しておりません。');

$(this).val('');

}

});

</script>

<button type="submit">SUBMIT</button>

</form>

htmlの方

formのenctypeはファイルを扱う上で必須の宣言らしいので忘れずに。

acceptでファイルタイプを指定できる。
画像縛りにしたいとかそういうときは入れたほうがいい。ひとつずつ書くのがめんどくさければ「image/*」にすれば脳死状態で全部を網羅できるけど、とりあえずで済ませるんじゃなくて「MIME」とかそのへんを調べると色々出てくるので一旦検索してみるのがいいかも。

acceptで縛っても「すべてのファイル」でソートを変えられるから強制力はあんまりないかも知れないのでjsで重ねて制御する。

jQueryの方

サーバー側の設定を超えたファイルとかをformで通しちゃうとよく分からん動作が起きたりするらしいんで、セキュリティ面ではガバガバだけど、submitする前にjsでファイルの中身を判別して処理してしまおうっていうやつ。

ファイルタイプを指定する
ファイルサイズを指定する

が今回のテーマ。
ファイルを指定したタイミング（.change()）をトリガーにして、こちらの指定外だったら即座にinputの中を空にする。

ファイルタイプはifでやるのが面倒なので配列でまとめておく。pjpegとか見慣れないものがあるんだけど、htmlに入れてなくてもブラウザ側が勝手に補填してくれるもんだから、削りようがないからこっちも入れておく。なんでこんな拡張子があるのか知らない人は生い立ちについてちょっと調べてみるといいかも。

ファイルの中身を調べるのに「$(this).prop(‘files’)[0].***;」ってやってんだけど、これは多次元連想配列になってるから、それを展開して取得するためにこうなってる。console.log()を入れてるからブラウザのコンソールで確認してみたら何がどんな感じでまとまってるのかわかります。

で、今回はとりあえず画像とpdfで5MB以下なら通しますよってのを書いた。どっちかに引っかかればinputは空欄に戻る。
inArrayは配列の中に指定の要素があるかどうかを判定して、なければ「-1」を吐く。あった場合についてはちょっとややこしいから専門的な記事を読んだほうがいい。