JavaScriptでの画像ファイルの読み込み方法

JavaScriptのFileReaderを使用して画像ファイルを読み込む方法: FileReaderオブジェクトを使用すると、JavaScriptでファイルを非同期に読み込むことができます。以下は、FileReaderを使用して画像ファイルを読み込む例です。

<input type="file" id="fileInput">
<img id="previewImage" src="#" alt="プレビュー">
<script>
 const fileInput = document.getElementById('fileInput');
 const previewImage = document.getElementById('previewImage');
 fileInput.addEventListener('change', (event) => {
   const file = event.target.files[0];
   const reader = new FileReader();
   reader.addEventListener('load', (event) => {
     previewImage.src = event.target.result;
   });
   reader.readAsDataURL(file);
 });
</script>

上記のコードでは、<input type="file">要素を使用してファイルを選択し、選択した画像ファイルを読み込んで<img>要素のsrc属性に設定しています。選択した画像はプレビューとして表示されます。