【Javascript】ファイルを選択時に画像をプレビューする

preview image



当記事では、ファイル選択した時に画像をプレビューする機能を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で実装する方法でした。

You can subscribe by SNS

スポンサーリンク

人気記事