inputのtype=file選択時にjsでバリデーションする【vue.js】

inputのtype=file選択時にjsでバリデーションする【vue.js】

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を下記のように書いたとします。

inputのtype=file選択時にjsでバリデーションする【vue.js】

最終的には複数ファイルのアップロード。
このHTMLに、ファイル選択時に発生するイベントを取得するため、input要素にonchangeを追加します。

vue.jsだとv-on:change(@change)ですね。
これでファイル選択時に、メソッドのvalidate_uploadsが着火されます。

あとは、vue.js側のメソッドにvalidate_uploadsを書き加えます。

関数側(validate_uploads)では発生したイベントから、選択されたファイルのファイル名・ファイルサイズ・メディアタイプなどが取得できます。
取得した値から、ファイルの上限サイズ・制限拡張子などのバリデーションをおこなえます。

選択されたファイルがバリデーションに引っかかった場合はアラートを表示し、type=fileの値を空にしてリセットします。

inputのtype=file選択時にjsでバリデーションする【vue.js】

ファイルサイズ上限を超えたファイルを選択された時。

inputのtype=file選択時にjsでバリデーションする【vue.js】

許可していない拡張子のファイルが選択された時。

inputのtype=file選択時にjsでバリデーションする【vue.js】

どちらも引っかかった場合。
バリデーションの内容やアラート文は状況に合わせて変更する形で。

カテゴリ別記事一覧(全カテゴリ一覧
Vue.js ウェブ制作・運用

コメントを残す

*