Hatena 
当記事では、ファイル選択した時に画像をプレビューする機能をJavascriptで実装する方法について記します。
FileReaderを使用したサンプルをよく見ますが、当記事ではFileReaderを使わずに実装してみます。
また実際に触って動かせるデモも用意しております。
HTML
6行目の input[type=’file’]はファイル選択時にpreview関数（後で実装）を呼び出すようにしています。
7行目はプレビューを表示するエリアです。
1~4行目はプレビューエリアのスタイルを指定しています。
<style>
.preview-area{ width: 300px; }
.preview-area img{ width: 100%; }
</style>
<input type="file" onchange="preview(this)">
<div class="preview-area"></div>Javascript
下記のようにcreateObjectURLメソッドの引数にファイルを渡すことでblobURLを作成してくれます。
blobURLはimgタグのsrc属性に埋め込む事で画像をブラウザに表示することができます。
function preview(elem){
const blobUrl = window.URL.createObjectURL(elem.files[0])
elem.nextElementSibling.innerHTML = `<img src=${blobUrl}>`
}デモ
実際に動かせるデモを下記に用意しました。
ファイル選択をするとプレビューが表示されると思います。
ファイル選択（input[type=’file’]）を複数置いても問題なく動きます。
ソースコード全文
最後にソースコードを全文載せておきます。
<style>
.preview-area{ width: 300px; }
.preview-area img{ width: 100%; }
</style>
<input type="file" onchange="preview(this)">
<div class="preview-area"></div>
<input type="file" onchange="preview(this)">
<div class="preview-area"></div>
<script>
function preview(elem){
const blobUrl = window.URL.createObjectURL(elem.files[0])
elem.nextElementSibling.innerHTML = `<img src=${blobUrl}>`
}
</script>以上、ファイル選択した時に画像をプレビューする機能をJavascriptで実装する方法でした。
