JavaScriptを使用した複数のプレビュー画像の表示方法

1. 単一の画像プレビュー: まず、単一の画像プレビューを表示する方法を見てみましょう。以下のHTMLコードを使用します。

<input type="file" id="imageInput" onchange="previewImage(event)">
<img id="preview" src="#" alt="Image Preview" style="max-width: 200px; max-height: 200px;"/>

次に、JavaScriptコードを追加します。

function previewImage(event) {
  var input = event.target;
  var reader = new FileReader();
  reader.onload = function(){
    var image = document.getElementById('preview');
    image.src = reader.result;
  };
  reader.readAsDataURL(input.files[0]);
}

これにより、フォームに選択した画像がプレビューとして表示されます。

2. 複数の画像プレビュー: 次に、複数の画像をプレビューする方法を見てみましょう。以下のHTMLコードを使用します。

<input type="file" id="imageInput" multiple onchange="previewImages(event)">
<div id="previewContainer"></div>

次に、JavaScriptコードを追加します。

function previewImages(event) {
  var input = event.target;
  var previewContainer = document.getElementById('previewContainer');
  previewContainer.innerHTML = '';
  for (var i = 0; i < input.files.length; i++) {
    var reader = new FileReader();
    reader.onload = function() {
      var image = document.createElement('img');
      image.src = reader.result;
      image.style.maxWidth = '200px';
      image.style.maxHeight = '200px';
      previewContainer.appendChild(image);
    };
    reader.readAsDataURL(input.files[i]);
  }
}

これにより、複数の画像が選択された場合、それぞれの画像がプレビューとして表示されます。