☰

アップロード前に画像のプレビューを表示する 質問する

tag-icon • tag-icon html image-processing upload
アップロード前に画像のプレビューを表示する 質問する

私の HTML フォームには、次のようなファイルタイプの入力フィールドがあります。

 <input type="file" multiple>

次に、入力ボタンをクリックして複数のファイルを選択します。フォームを送信する前に、選択した画像のプレビューを表示したいと思います。HTML 5 でこれを行うにはどうすればよいでしょうか?

ベストアンサー1

以下は、イメージ タグの属性をオブジェクト URL にURL.createObjectURL設定して、を使用してサムネイルをレンダリングする簡単な例です。src

HTML コード:

<input accept="image/*" type="file" id="files" />
<img id="image" />

JavaScript コード:

document.getElementById('files').onchange = function () {
  var src = URL.createObjectURL(this.files[0])
  document.getElementById('image').src = src
}

以下の HTML の例のコード スニペットは、ユーザーの選択から画像を除外し、選択したファイルを複数のサムネイル プレビューにレンダリングします。

function handleFileSelect (evt) {
  // Loop through the FileList and render image files as thumbnails.
  for (const file of evt.target.files) {
 
    // Render thumbnail.
    const span = document.createElement('span')
    const src = URL.createObjectURL(file)
    span.innerHTML = 
      `<img style="height: 75px; border: 1px solid #000; margin: 5px"` + 
      `src="${src}" title="${escape(file.name)}">`

    document.getElementById('list').insertBefore(span, null)
  }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" accept="image/*" id="files" multiple />
<output id="list"></output>

おすすめ記事