オブジェクトのresultプロパティに、Data URL形式のデータが入っているため。
(readAsDataURLメソッドで取得可能)
バイナリファイルを上記の方法で取得可能なために実現できる。
以下、コードを記述。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>music library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#btn_to_show_img {
padding: 20px;
}
</style>
</head>
<body>
<h1>買ったCDをビジュアル的に管理したい</h1>
<input type="file" name="" id="image_file">
<button id="btn_to_show_img">Show</button>
<hr>
<div id="list"></div>
<script src='main.js'></script>
</body>
</html>
main.js
const ImgFile = document.getElementById('image_file');
const BtnShow = document.getElementById('btn_to_show_img');
BtnShow.addEventListener('click', (res) => {
// FileReaderオブジェクトを使う
const input = ImgFile.files[0];
const reader = new FileReader();
console.table(reader);
reader.addEventListener('load', (e) => {
// imgタグを作成する
const img_anchor = document.createElement('img');
img_anchor.src = reader.result;
const list = document.getElementById('list');
list.appendChild(img_anchor);
}, true);
// エラーハンドリング
reader.addEventListener('error', () => {
console.error(reader.error.message);
}, true);
reader.readAsDataURL(input);
// 画像を表示させるごとにvalueを初期化する
ImgFile.value = "";
}, true);
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント