ローカルの画像ファイルを表示する
コード
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に読み込んだファイルのデータを渡せば表示できる
実行結果
