【jQuery】アップロードできるファイルの種類を制限する【コピペでOK】

Contents

HTML
jQuery
デモ

HTML

HTMLでファイルアップローダを用意します。
jQueryもCDNで読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="file" class="limited_uploader">

jQuery

やっていることはコメントの通りになります。

$(".limited_uploader").change(function(){                   //ファイルがアップロードされたら
   const approvalFileType=["png","jpg","jpeg","PNG","JPG"]  //許可するファイルタイプを設定
   const errMsg = "下記タイプのみOK"                         //エラーメッセージを設定
   let uploadedFile=$(this).prop('files')[0]                //アップロードファイル取得
   let fileType=uploadedFile.type.split("/")[1]             //ファイルの種類を取得
   $(this).next(".err").remove()                            //エラーメッセージを削除
   if(!approvalFileType.includes(fileType)){                //許可したファイルタイプではない場合
      let err = $("<p class='err'>"+errMsg+"<br></p>")      //エラーメッセージのHTMLを作成                   
      err.append(`${approvalFileType.join(',')}`)           //エラーメッセージに許可ファイルタイプを追記
      $(this).after(err)                                    //エラーメッセージ表示
      $(this).val("")                                       //アップローダーを空にする
   }
})