jQuery

jQuery Validation Plugin でアップロードファイルをValidation（検証）する方法

2022年10月22日 by single コメントはまだありません

jQuery Validation Plugin でアップロードファイルをValidation（検証）する方法

今回は、jQuery Validation Pluginを利用し、アップロードするファイルを事前に検証（Validation）する方法を紹介します。

なお、基本的な導入方法などについては、以下の記事を参考ください。

導入方法

まず、アップロードするファイルを事前に検証するには、アドオンとして東京されているメソッドを利用する必要があります。

事前に「additional-methods.js」または「additional-methods.min.js」を追加で読み込んでおく必要があります。

ダウンロードの場合

ダウンロードした書庫ファイルを解凍し、展開したファイルのディレクトリ「dist」配下にある、『additional-methods.js』または『additional-methods.min.js』を読み込んでください。

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
<script src="/assets/jquery-validation-1.19.5/dist/jquery.validate.js"></script>
<script src="/assets/jquery-validation-1.19.5/dist/additional-methods.js"></script>
<script src="/assets/jquery-validation-1.19.5/dist/localization/messages_ja.js"></script>

CDNの場合

「additional-methods.js」も公に公開されているのでそれをリンクしましょう。

   <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
   <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>

MIME Typeでアップロードできるファイルを制限する方法

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>jQuery Validation demo(4)</title>
   <!-- CDN jQuery https://releases.jquery.com/jquery/ -->
   <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
   <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>
  <style type="text/css">
  .error {
    border: 3px solid red;
  }
  /* 入力チェックNGの場合に適用されるスタイル */
  label.error {
    border: 3px solid orange;
    margin-left:3px
  }
  /* 入力チェックOKの場合に適用されるスタイル */
  .valid {
    border: 3px solid blue !important;
  }
  </style>
</head>
<body>
  <form id="myForm" enctype='multipart/form-data' method='post'>
    <p>
      <label for="field">MINE Type オーディオファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile1" name="audioFile">
    </p>
    <p>
      <label for="field">MINE Type 動画ファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile2" name="videoFile">
    </p>
    <p>
      <label for="field">MINE Type EXCELファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile3" name="excelFile">
    </p>
    <p>
      <label for="field">MINE Type テキストファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile4" name="textFile">
    </p>
    <input type="submit" value="送信" />
  </form>
  <script>
    /* Validation初期化 */
    $("#myForm").validate(
    {
      /* 入力項目定義 */
      rules: {
        audioFile: 
        {
          required: true,
          accept: "audio/*"
        }
        ,
        videoFile: 
        {
          required: true,
          accept: "video/*"
        }
        ,
        excelFile: 
        {
          required: true,
          accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        }
        ,
        textFile: 
        {
          required: true,
          accept: "text/plain"
        }
      },
      /* メッセージ定義 */
      messages: {
        audioFile: {
          accept: "音楽ファイルしかアップロードできません"
        },
        videoFile: {
          accept: "動画ファイルしかアップロードできません"
        },
        excelFile: {
          accept: "EXCELファイルしかアップロードできません"
        },
        textFile: {
          accept: "テキストファイルしかアップロードできません"
        }
      },
    });
  </script>
</body>
</html>

デモ

MIME Typeで制限するには？

ファイル種類（MIME Type）で制限するには、メソッドの『accept』を利用してください。

MIME Typeとはファイルに関連付けられている種類のことです。

音声ファイルだけに制限するには？

アップロードできるファイルを音声ファイルだけに限るには、acceptメソッドにMIMEタイプとして『audio/*』を指定してください。

<form id="myForm" enctype='multipart/form-data' method='post'>
  <input type="file" class="left" id="uploadfile1" name="audioFile">
  <input type="submit" value="送信" />
</form>

<script>
  /* Validation初期化 */
  $("#myForm").validate(
  {
    /* 入力項目定義 */
    rules: {
      audioFile: 
      {
        required: true,
        accept: "audio/*"
      }
     }
   }
</script>

動画ファイルだけに制限するには？

もし、アップロードさせたいファイルを動画ファイルだけに限定させたい場合には、acceptメソッドの値に『video/*』を指定してください。

EXCELファイルだけに制限するには？

もし、アップロードさせたいファイルを動画ファイルだけに限定させたい場合には、acceptメソッドの値に『application/vnd.openxmlformats-officedocument.spreadsheetml.sheet』を指定してください。これは、拡張子「xlsx」ファイルの場合のMIME Typeになりますので、古い拡張子「.xls」ファイルは受け付けません。

テキストファイルだけに制限するには？

もし、アップロードさせたいファイルを動画ファイルだけに限定させたい場合には、acceptメソッドの値に『text/plain』を指定してください。

拡張子でアップロードできるファイルを制限する方法

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>jQuery Validation demo(3)</title>
   <!-- CDN jQuery https://releases.jquery.com/jquery/ -->
   <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="  crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
   <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/localization/messages_ja.js"></script>
  <style type="text/css">
  .error {
    border: 3px solid red;
  }
  /* 入力チェックNGの場合に適用されるスタイル */
  label.error {
    border: 3px solid orange;
    margin-left:3px
  }
  /* 入力チェックOKの場合に適用されるスタイル */
  .valid {
    border: 3px solid blue !important;
  }
  </style>
</head>
<body>
  <form id="myForm" enctype='multipart/form-data' method='post'>
    <p>
      <label for="field">拡張子(.mp3)のファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile1" name="audioFile">
    </p>
    <p>
      <label for="field">拡張子(.mp4)ファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile2" name="videoFile">
    </p>
    <p>
      <label for="field">拡張子(.xlsとxlsx)ファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile3" name="excelFile">
    </p>
    <p>
      <label for="field">拡張子(.txtとcsv)ファイルのみアップロード可能 </label>
      <input type="file" class="left" id="uploadfile4" name="textFile">
    </p>
    <input type="submit" value="送信" />
  </form>
  <script>
    /* Validation初期化 */
    $("#myForm").validate(
    {
      /* 入力項目定義 */
      rules: {
        audioFile: 
        {
          required: true,
          extension: "mp3"
        }
        ,
        videoFile: 
        {
          required: true,
          extension: "mp4"
        }
        ,
        excelFile: 
        {
          required: true,
          extension: "xls|xlsx"
        }
        ,
        textFile: 
        {
          required: true,
          extension: "txt|csv"
        }
      },
      /* メッセージ定義 */
      messages: {
        excelFile: {
          extension: "EXCELファイルしかアップロードできません"
        },
        textFile: {
          extension: "テキストファイルしかアップロードできません"
        }
      },
    });
  </script>
</body>
</html>

デモ

拡張子で制限するには？

拡張子で制限するには、メソッドの『extension』を利用してください。

特定の拡張子だけに制限するには？

特定の拡張子だけに制限するには、extensionメソッドに許可したい拡張子を定義してください。

<form id="myForm" enctype='multipart/form-data' method='post'>
  <input type="file" class="left" id="uploadfile1" name="audioFile">
  <input type="submit" value="送信" />
</form>

<script>
  /* Validation初期化 */
  $("#myForm").validate(
  {
    /* 入力項目定義 */
    rules: {
      audioFile: 
      {
        required: true,
        extension: "mp3"
      }
     }
   }
</script>

複数の拡張子で制限するには？

複数の拡張子を許可した場合にはパイプ（|）記号で複数拡張子を定義してください。

<form id="myForm" enctype='multipart/form-data' method='post'>
  <input type="file" class="left" id="uploadfile3" name="excelFile">
  <input type="submit" value="送信" />
</form>

<script>
  /* Validation初期化 */
  $("#myForm").validate(
  {
    /* 入力項目定義 */
    rules: {
        excelFile: 
        {
          required: true,
          extension: "xls|xlsx"
        }
     }
   }
</script>

ご参考

関連ページ