勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

  jQuery JavaScript HTML

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡張子は合っているか？」等をチェックするケースが多々ある。チェック処理はサーバサイド(PHP等)じゃないとできないと思っていたが、HTML5のFile APIを利用することでフロントエンドでもチェックできることを最近知ったのでメモ。

 

サンプル

https://taitan916.info/sample/fileapi/

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File APIのテスト</title>
</head>
<body>

	<input type="file" id="file">
	<input type="button" id="button" value="ファイル情報を表示">
	<div id="file_data">

	</div>

	<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
	<script>
		$(function(){
			$('#button').click(function(){
				//jQueryで取得する場合
				const file = $('#file').prop('files')[0];

				//JavaScriptで取得する場合
				//const file = document.getElementById('file').files[0];
				const file_data = "\
					ファイル名:" + file.name + "<br>\
					ファイルサイズ:" + file.size + "byte<br>\
					ファイル形式:" + file.type + "<br>\
				";
				console.log(file);
				$('#file_data').html(file_data);
			});
		});
	</script>
</body>
</html>

ファイルサイズはbyte単位になるのでKB単位にする場合は1024、MB単位にする場合は1048576で割る。

 

対応ブラウザ

IE11を含め主要ブラウザは対応している。以下より対応ブラウザが確認できる。

https://developer.mozilla.org/ja/docs/Web/API/File#browser_compatibility

 

所感

サーバサイド(PHP)でファイルのチェックを行い、例えばファイルサイズが大きすぎるのでアップロード不可という場合に元のフォームページに戻ることになるが、その際にファイルは選択されていない状態になる。テキストボックス等は$_POSTで元のフォームページに送ったり、セッションに保存したものをフォームに反映させることは容易だがファイルに関しては対応が難しい。

フロントエンドでチェックができると上記の問題が解決される。もちろんサーバサイドでもチェックは必要だが、先にフロントエンドでチェックし問題があるようならアラート等で知らせる方がユーザビリティの面で良さそう。

 - jQuery JavaScript HTML

  関連記事

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...