【jQuery】画像をアップロードしてプレビューを表示

サイトで画像をアップロードすると、通常だとファイル名だけがサイトに表示されますけどプレビュー表示させたい時はありませんか。

ということで早速プレビュー表示の方法をお伝えしますね。

DEMOはこちら

送信する

実装方法

こちらを用意します。

HTML

<form action="#" method="POST">
  <img id="upimage">
  <div>
    <input type="file" id="upfile">
    <button type="submit">送信する</button>
  </div>
</form>

jQuery

$(function(){
  $('#upfile').change(function(e){
    var file = e.target.files[0];
    var reader = new FileReader();
    if(file.type.indexOf('image') < 0){
      alert("画像ファイルを指定してください。");
      return false;
    }
    reader.onload = (function(file){
      return function(e){
        $('#upimage').attr('src', e.target.result);
        $('#upimage').attr('title', file.name);
      };
    })(file);
    reader.readAsDataURL(file);
  });
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

#myfileでファイルが選択されたら以下の処理を実行します。

jQuery

$('#myfile').change(function(e){
 // ここに処理を記述
});

3行目

ファイルオブジェクトを取得します。

jQuery

var file = e.target.files[0];

4行目

FileReaderオブジェクトをインスタンス化します。

jQuery

var reader = new FileReader();

5〜8行目

アップロードしようとしたものが画像じゃない場合、処理を終了します。

jQuery

if(file.type.indexOf('image') < 0){
  alert("画像ファイルを指定してください。");
  return false;
}

9〜14行目

アップロードした画像を設定します。

jQuery

reader.onload = (function(file){
  return function(e){
    $('#img1').attr('src', e.target.result);
    $('#img1').attr('title', file.name);
  };
})(file);

15行目

画像を読み込みます。

jQuery

reader.readAsDataURL(file);

まとめ

いかがでしたか。

ファイル名だけが表示されるよりは、見た目が良くなるので、是非一度取り入れてみてください。