BinaryDevelop
  1. ホーム
  2. html

[解決済み] アップロード前に画像のプレビューを表示する

2022-07-29 18:27:28

質問

私のHTMLフォームでは、例えば、ファイルタイプの入力ファイルがあります。 

 <input type="file" multiple>

そして、入力ボタンをクリックして、複数のファイルを選択しています。 私は今、フォームを送信する前に、選択した画像のプレビューを表示したい。 HTML5でそれを行うにはどうすればよいですか？

どのように解決するのですか？

を利用した簡単な例です。 URL.createObjectURL を使用してサムネイルをレンダリングする例です。 src 属性にオブジェクトの URL を指定することでサムネイルを表示します。

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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します