jqueryを使って `<input type="file">` に入れられた画像データをリアルタイムでサンプル表示する

formの処理の課題はよくもらうんだけど、いつもどうだったか忘れてしまう。

担当しているサイトがjqueryを使っているので、画像をfileで取り込んでサンプル表示するメモしておく。

• InternetExplorer 9 以前では、対応していません。
  
• Safari 5 以前では、対応していません。
• 対応表はこちらMDN ウェブドキュメント

    //fileを変更したら
    $('#image').on('change', function() {

        //fileの値は空ではなくなるはず
        if ($('#image').val() !== '') { 

            //propを使って、file[0]にアクセスする
            var image_ = $('#image').prop('files')[0]; 

            //添付されたのが本当に画像かどうか、ファイル名と、ファイルタイプを正規表現で検証する
            if (!/\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$/.test(image_.name) || !/(jpg|jpeg|png|gif)$/.test(image_.type)) {
                alert('JPG、GIF、PNGファイルの画像を添付してください。');
            //添付された画像ファイルが１M以下か検証する
            } else if (1048576 < image_.size) {
                alert('1MB以下の画像を添付してください。');
            } else {
                //window.FileReaderに対応しているブラウザどうか
                if (window.FileReader) {
                    //FileReaderをインスタンス化
                    var reader_ = new FileReader();
                    //添付ファイルの読み込みが成功したときに実行されるイベント（成功時のみ）
                    //一旦飛ばしてreader_ .readAsDataURLが先に動く
                    reader_.onload = function() {
                        //Data URI Schemeをimgタグのsrcにいれてリアルタイムに添付画像を描画する
                        $('#preview').attr('src', reader_.result);
                    }
                    //Data URI Schemeを取得する 
                    reader_.readAsDataURL(image_);
                }
                return false;
            }
        }
        //ダメだったら値をクリアする
        $('#image').val('');
    });

• 参考：http://hakuhin.jp/js/data_uri_scheme.html

データの送信はformData_ を使うことを想定している。

var formData_ = new FormData($sendForm.get(0));