More than 5 years have passed since last update.

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

Posted at 2015-06-22

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

#コード

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に読み込んだファイルのデータを渡せば表示できる

##実行結果

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

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