tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【javascript】FileReaderを使って画像をプレビューする

FileReader

画像をプレビューする時には、web APIの一つである FileReader というものを扱います。
こちらを用いることで input で選択したファイルを非同期で読み取ることが可能です。

<input type="file" accept='image/*' multiple="multiple" onchange="preview(this);">

<div id="preview"></div>

<script>
function preview(obj){
    for (i = 0; i < obj.files.length; i++) {
        var fileReader = new FileReader();
        fileReader.onload = (function (e) {
            document.getElementById('preview').innerHTML += '<img src="' + e.target.result + '">';
        });
        fileReader.readAsDataURL(obj.files[i]);
    }
}
</script>

上記のコードで画像のプレビューができます。
解説していきます。

var fileReader = new FileReader();

インスタンスを生成します。

fileReader.readAsDataURL(files);

fileReaderの readAsDataURL()というメソッドがあります。
指定したBlob型かFIle型のファイルを読み込んでくれます。
読み込むとresult属性にファイルのurlを格納してくれます。

  var fileReader = new FileReader();
  fileReader.onload = (function (e) {
       console.log(fileReader.result)  
       //  結果:/data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBA
                      QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA......
  });
  fileReader.readAsDataURL(sample);
        console.log(fileReader.result)    //結果:undefined

実際にreadAsDataでリーディングした後にconsoleで吐き出してみると
data:で始まる文字の羅列がresultに格納されていることがわかります。

この文字の羅列はBase64と言われます。
昔、メールの送受信はASCIIという7ビットのデータでやり取りしてましたが、
それだとデータが小さすぎて画像や音声を送ることができません。
その時に登場したのがBase64だそうです。

そしてこのbase64形式のurlは imgタグのsrc属性でもバッチリ使えます。

   fileReader.onload = (function (e) {
       document.getElementById('preview').innerHTML += '<img src="' + e.target.result + '">';
   });

最後に、onloadメソッドでリーディングを実行する度に関数を呼び出し
previewにimgタグを生成していきます。

たった10行くらいのコードなのに、
base64やfilereader api など画像に関する用語がたくさん出てきて勉強になりました。
  

- バイナリラージオブジェクト(Blob)

画像や音声などのオブジェクトをデータベースに格納する時に用いられるデータ型のこと。

- データベース管理システム(DBMS)

データベースの整理、更新、検索、などを行うソフトウェアのこと。
data base management system のことを略してDBMSと読んでいる。
MySQL oracle postgreSQL がそれに当たる。

base64について https://qiita.com/PlanetMeron/items/2905e2d0aa7fe46a36d4

FileReader API について https://developer.mozilla.org/ja/docs/Web/API/FileReader