[jQuery] 画像アップロード時にプレビュー表示する（imageタグ版）

投稿日：2017年11月18日更新日：2018年5月2日

画像アップロード時にプレビュー表示するサンプルです。

サンプルソース

例）画像を指定すると画像をプレビュー表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#myfile').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){
        $("#img1").attr("src", e.target.result);
        $("#img1").attr("title", file.name);
      };
    })(file);
    reader.readAsDataURL(file);

  });
});
</script>
</head>
<body>
  <input type="file" id="myfile"><br>
  <img id="img1" style="width:300px;height:300px;" />
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#myfile').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){

$("#img1").attr("src", e.target.result);

$("#img1").attr("title", file.name);

};

})(file);

reader.readAsDataURL(file);

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

画像ファイルを指定するとプレビュー表示します。

解説

readerが読込み完了した時点で画像を設定するのがポイントです。
canvasタグにプレビュー表示するサンプルは、以下ページをご覧ください。
→ [jQuery] 画像アップロード時にプレビュー表示する（canvas版）

執筆者：とら