ウェブ制作・運用input要素のtype=fileでのファイルアップロード。頻繁に使うわけですが。通常だと、submitされた値をPHPだと$_FILESなんかで受け取って、ファイルサイズや拡張子なんかのバリデーションをしたり、問題無ければファイルアップロードしたりします。submit前、クライアント側でユーザがファイル選択をした段階でバリデーションをしたいってこともあります。いうことで、それをjavascriptで書いてみます。これまで何度か書いているのですが、都度忘れてしまうので備忘録として。今回はvue.jsを使って書いていますが、他のフレームワーク・ライブラリでも同様に使えるはずです。フォームsubmit前にinputのtype=fileのバリデーションをしたいinputのtype=fileの値のバリデーションは、前述の通りサーバサイド側で行うことが多いと思います。今回の件では、POSTされる要素のバリデーションをsubmit前に全てJavascriptでおこなっていました。後からtype=fileが追加されたので、そのバリデーションもファイル選択時におこなってしまおうというのが趣旨です。vue.jsでtype=fileのファイル選択時にバリデーションをおこなう方法まず、HTMLを下記のように書いたとします。name="upload_photos_pdfs[]"></li></ul>最終的には複数ファイルのアップロード。このHTMLに、ファイル選択時に発生するイベントを取得するため、input要素にonchangeを追加します。@change="validate_uploads">vue.jsだとv-on:change(@change)ですね。これでファイル選択時に、メソッドのvalidate_uploadsが着火されます。あとは、vue.js側のメソッドにvalidate_uploadsを書き加えます。''}}}関数側(validate_uploads)では発生したイベントから、選択されたファイルのファイル名・ファイルサイズ・メディアタイプなどが取得できます。取得した値から、ファイルの上限サイズ・制限拡張子などのバリデーションをおこなえます。選択されたファイルがバリデーションに引っかかった場合はアラートを表示し、type=fileの値を空にしてリセットします。ファイルサイズ上限を超えたファイルを選択された時。許可していない拡張子のファイルが選択された時。どちらも引っかかった場合。バリデーションの内容やアラート文は状況に合わせて変更する形で。*メールアドレス(公開はされません。constraint漫画系広告がうざい!閲覧時に不快な広告を非表示にする方法Chromeで「データ侵害によりパスワード情報が漏洩」と警告が!対応方法は?筆者(ishikawa)プロフィールウェブサイト制作・ブログ運営などをおこなうフリーランス。仕事関係ではウェブの世界にどっぷり浸かっているが、趣味はアウトドア。〜イズログ〜旅行・旅先でのグルメ情報を中心に綴る雑記ブログ。FISH釣りや釣った魚を調理して食べる釣り飯をメインにキャンプなどのアウトドアについて綴るブログ。大切な人や自分へのプレゼント・ギフトに、オモイを伝えられる素敵なモノを紹介・販売しています。無料で使えるウェブツール集。随時追加していきます。当ブログに掲載するコンテンツ(テキスト、画像等)を無断に複製・転用することを禁止します。