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


当記事では、ファイル選択時に複数画像をプレビューする方法について記します。


ファイル選択時に画像を1枚だけプレビューしたい場合は下記が参考になるかと思います。
【Javascript】ファイルを選択時に画像をプレビューする





HTML

ファイル選択要素とプレビューエリアを置きます。
input[type=file]にmultiple属性を付けることで、ファイルを複数選択できるようになります。
onchange属性でファイル選択時にpreview関数(後で実装)を呼び出すようにしています。

<input type="file" onchange="preview(this)" multiple>
<div class="preview-area"></div>




CSS

CSSでプレビューエリアのスタイルを整えます。
ここでは画像を4列で表示するようにします。

.preview-area{ 
    display: flex;
    flex-wrap: wrap;
}
.preview-area img{
    width: 24%;
    margin: 0 0 10px;
    object-fit: contain;
}
.preview-area img:not(:nth-child(4n)){
    margin-right: 1.333%;
}




Javascript

これはファイル選択時に呼び出される関数です。
選択されたファイルをループで変数に追加して、最後にプレビューしています。

function preview(elem, output = '') {
    Array.from(elem.files).map((file) => {
        const blobUrl = window.URL.createObjectURL(file)
        output+=`<img src=${blobUrl}>`
    })   
    elem.nextElementSibling.innerHTML = output
}





ソースコード全文

最後にソースコードを全文載せておきます。

<style>
    .preview-area{ 
        display: flex;
        flex-wrap: wrap;
    }
    .preview-area img{
        width: 24%;
        margin: 0 0 10px;
        object-fit: contain;
    }
    .preview-area img:not(:nth-child(4n)){
        margin-right: 1.333%;
    }
</style>

<input type="file" onchange="preview(this)" multiple>
<div class="preview-area"></div>

<script>
    function preview(elem, output = '') {
        Array.from(elem.files).map((file) => {
            const blobUrl = window.URL.createObjectURL(file)
            output+=`<img src=${blobUrl}>`
        })   
        elem.nextElementSibling.innerHTML = output
    }
</script>







以上、ファイル選択時に複数画像をプレビューする方法でした。

スポンサーリンク

レバテックキャリアの広告画像

You can subscribe by SNS

スポンサーリンク