19
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-06

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ファイルの画像を添付してください。');
            //添付された画像ファイルが1M以下か検証する
            } 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('');
    });

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?