JavaScript/jQueryでファイルアップロードフォーム（インプットタグ）の拡張子を確認する

<form name=’test’>
<input name="picture_file" type="file" >
</form>

　こんな感じのファイルアップロードフォーム（インプットタグ）を用意して、ファイルをアップロードさせる時に、タグの属性（accept）でファイル形式（拡張子）を設定できるけど、ブラウザ依存なんで、JavaScriptでアップロードファイル名の拡張子をチェックしたい時の開発パーツ（jQuery利用）

<form name=’test’>
<span id=’picture_file_span’><input name="picture_file" type="file" id="picture_file" onchange="extchk(‘picture_file_span’, $(this).val());"></span>
</form>

<script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’></script>
<script type="text/javascript">
    function extchk(id, fn){
        var fnsplt = fn.split(".");
        var ext = fnsplt[fnsplt.length – 1];
        switch(ext.toLowerCase()){
            case "jpg":
            case "jpeg":
            case "gif":
            case "png":
                return true;
                break; //未到達コード
            default:
                alert(‘未対応のファイル形式です’);
                jQuery(‘#’+id).html(jQuery(‘#’+id).html());
                return false;
                break; //未到達コード
        }
    }
</script>

　ファイルインプットタグの変更イベントで、設定したファイル名の拡張子がcaseに列挙されていればtrue,それ以外はアラートメッセージを出してファイルインプットをクリアした上でfalseを返している（IEではfile inputタグのvalをクリアすることは出来ないので、inputタグをspanで括って、中身を書き直すことでクリアしている）
　最初、jQueryでバインドしたが、htmlの差し替えでファイルインプットをクリアするとバインドが解除されるので、タグのonChangeに載せている。
　ファイルの中身を確認しているわけではないけど、簡単なチェックにはなるからWeb開発時に使い回せるだろう。

テストページ

ソースの整形にはHTML特殊文字をエンコードする on さくらVPSを利用している。

(2323)

Tweet