【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