2018-10-29に更新

【スニペット】input type="file"から画像を選択したときに、サムネイルを表示させる

FileRearderオブジェクトを使うと、画像パスを取得しなくても良い

オブジェクトの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);

キココ

仕事で使ったことのある言語: PHP, C#, JavaScript

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント