画像だけアップロードしてそれ以外の場合はエラー表示 ＋ submitさせない

タイトル通りですけどこういうことってよくあります。
特に画像関連は扱わない事が無いくらいですし。

File APIというものを使用するとファイルの種類やファイルサイズを取得することが出来ます。
jqueryから利用できるのでサクっとやってみます。

<script>
$(function() {
  $('input[type=file]').after('');

  // アップロードするファイルを選択
  $('input[type=file]').change(function() {
    var file = $(this).prop('files')[0];

    // 初期化 submit
    $('#submit').removeAttr('disabled');
    // 初期化 エラー表示
    $('#span').html('');
    
    // [1] 形式チェック
    if( file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif' )
    {
      // [2] サイズチェック
      if( (file.size / 1024) > 1024 )
      {
       $('#span').html('ファイルサイズは1024kb以下にしてください');
         $('#submit').attr('disabled','disabled');
      }
    }
    else
    {
      $('#span').html('画像を指定してください');
      $('#submit').attr('disabled','disabled');
    }
    console.log(file1);
  });
});
</script>

まずjavascript部分。

指定されたファイルがjpeg・png・gifかを[1]の部分でチェックします。
OKなら次の処理へ行き、NGならエラー表示を行いつつsubmitボタンをdisabledに変更します。

画像ファイルであることが確認されたら次に[2]の部分でファイルサイズのチェックをします。
取得する値はbyteになるので1024で割ってkbに修正しています。
OKなら何もせずにそのままファイルが指定されますが、NGの場合はファイルサイズに関する
エラーを表示しつつsubmitボタンをdisabledに変更します。

HTMLの部分は以下になります。

<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="userfile">
<span id="span"></span>
<input type="submit" id="submit" value="次へ" name="create">
</form>

spanの部分にエラーを表示し、submitボタンにidでsubmitを指定することでボタンのdisabledを切り替えています。


ちなみにこれはJQueryを使っているのでJQueryが必要ですが、File APIというブラウザーについてる機能を利用しています。
その為、File APIが実装されていないブラウザーでは機能しません。
最近のブラウザーでは軒並み標準でサポートしていますがWindowsXPなどにあるIE8ではサポートされいないので使えません。


多くの人を苦しめるIE8が早く地球上と言わずこの3次元空間から消滅してくれる日がくることを祈っています。

---

JQuery