formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡張子は合っているか？」等をチェックするケースが多々ある。チェック処理はサーバサイド(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で元のフォームページに送ったり、セッションに保存したものをフォームに反映させることは容易だがファイルに関しては対応が難しい。
フロントエンドでチェックができると上記の問題が解決される。もちろんサーバサイドでもチェックは必要だが、先にフロントエンドでチェックし問題があるようならアラート等で知らせる方がユーザビリティの面で良さそう。
関連記事
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
jQueryにてclosestの使いどころとparent / parentsとの違いについて
あるソースコードを見ているとjQueryにてclosest()という使ったことの ...
-
-
「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法
「input type="number"」のテキストボックスに対して「2桁まで」 ...