HTML5 / JavaScript で ローカルの画像をプレビュー

  • 14
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

ローカルの画像ファイルを表示する

コード

sample.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像表示テスト</title>
</head>
<body>
<img src="" id="preview">
<input type="file" accept="image/*" id="getfile">
<script>
var file = document.querySelector('#getfile');

file.onchange = function (){
  var fileList = file.files;
  //読み込み
  var reader = new FileReader();
  reader.readAsDataURL(fileList[0]); 

  //読み込み後
  reader.onload = function  () {
    document.querySelector('#preview').src = reader.result;
  };
};
</script> 
</body>
</html>

document.querySelector('#preview').src = reader.result;
img要素のsrcに読み込んだファイルのデータを渡せば表示できる

実行結果

imgReader.png