it当記事では、ファイル選択時に複数画像をプレビューする方法について記します。ファイル選択時に画像を1枚だけプレビューしたい場合は下記が参考になるかと思います。完成イメージ下記のように選択した複数ファイルをすべてプレビューする機能の実装を目指します。HTMLファイル選択要素とプレビューエリアを置きます。input[type=file]にmultiple属性を付けることで、ファイルを複数選択できるようになります。onchange属性でファイル選択時にpreview関数(後で実装)を呼び出すようにしています。class="preview-area"></div>CSSCSSでプレビューエリアのスタイルを整えます。ここでは画像を4列で表示するようにします。100%;}Javascriptこれはファイル選択時に呼び出される関数です。選択されたファイルをループで変数に追加して、最後にプレビューしています。output}デモ実際に動かせるデモを用意しました。選択したファイルがすべてプレビューされると思うので試してみてください。最後にソースコードを全文載せておきます。}</script>以上、ファイル選択時に複数画像をプレビューする方法でした。