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で元のフォームページに送ったり、セッションに保存したものをフォームに反映させることは容易だがファイルに関しては対応が難しい。
フロントエンドでチェックができると上記の問題が解決される。もちろんサーバサイドでもチェックは必要だが、先にフロントエンドでチェックし問題があるようならアラート等で知らせる方がユーザビリティの面で良さそう。
関連記事
-
-
jQueryで新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...
-
-
javascriptでメモリ開放
今まで考えたこと無かったけどjavascriptを使う際は メモリ消費に気をつけ ...
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...
-
-
htmlタグが入った内容の文字を丸める
phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
readonlyについて
日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...
-
-
PHPとSQLiteでi-mobileのデータをグラフ化
i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...