【jQuery】pdfが存在するか、mimeタイプのバリデーションする

jQueryで、pdfのアップロード時にファイルが選択されているか、正しいpdfファイルかのバリデーションをチェックします。

HTMLのform構造
jQueryでファイルが添付されたかのチェック
jQueryでMIMEタイプが正しいかのチェック
jQueryでファイル添付必須のチェック

jQuery関連記事

HTMLのform構造

HTML

<form action="send.php" enctype="multipart/form-data" method="post">
  <label for="resume">履歴書アップロード</label><em>必須</em>
  <input type="file" id="resume" name="resume" value="">

  <label for="cv">職務経歴書アップロード</label>
  <input type="file" name="cv" id="cv" value="">
</form>

まずは、formの構造を確認していきます。
ほかに名前とかいろいろありますが、履歴書はアップロード必須、職務経歴書は任意という条件で作ります。
今回はJavaScript側なのであまり関係ありませんが、ファイル送信する場合は、enctype="multipart/form-data"を忘れずに！

jQueryでファイルが添付されたかのチェック

JavaScript

//ファイル添付必須
function upload_check(id, category) {
  file = $("#" + id).prop('files')[0];
  if (file === undefined) {
    result = false;
  } else {
    result = true;
  }
  return result;
}

引数にidを指定できるようにしてあるので、必須かどうかを確認する場合はこれを使いまわします。
categoryは、エラー時に表示する項目の名前（職務経歴書など）を指定します。
fileに選択ファイルの情報が格納されるので、それを参照してファイルが添付されているかを確認しています。
返り値としては、真偽値を返します。

jQueryでMIMEタイプが正しいかのチェック

JavaScript

//ファイルのMIMEタイプをチェック
function upload_check_type(id, category) {
  file = $("#" + id).prop('files')[0];
  if (file.type != 'application/pdf') {
    $('#' + id).val(''); //選択したファイルをクリア
    $('#errorbox').append(category + "は、pdf形式のみアップロード可能です。<br>");
    error += category + "は、pdf形式のみアップロード可能です。" + "\n";
  }
}

前のfunctionと使い方は同じですが、実行結果としては、正常なら何もせず、エラーの場合はエラーメッセージを追加します。
全てのバリデーションが完了後、errorが空なら送信実行し、そうでないならエラーメッセージを表示し、送信自体を中断するようにしています。

ここでのポイントは、file.typeでMIMEタイプをPDFのものと比較しています。
ただ、JavaScriptでのMIMEタイプは完全ではないので、ユーザーの間違いをはじく程度に考えて置いた方がいいですね。正確なチェックはサーバーサイドでやりましょう。

jQueryでファイル添付必須のチェック

JavaScript

//ファイル添付必須
var resume = upload_check('resume', '履歴書');
if (resume) {
  upload_check_type('resume', '履歴書');
} else {
  $('#resume').val(''); //選択したファイルをクリア
  $('#errorbox').append("履歴書は、アップロードが必須です。<br>");
  error += "履歴書は、アップロードが必須です。" + "\n";
}

upload_check()で、履歴書が添付されたかチェックし、その結果で処理を振り分けます。
trueならMIMEタイプをチェックし、falseならエラーメッセージに追記しています。
他にもファイルサイズなど、いろいろバリデーションがあると思いますが、ここまでにしておきます。