html - 上传前显示图片预览

Question

在我的 HTML 表单中，我输入了类型文件，例如:

 <input type="file" multiple>

然后我通过单击该输入按钮来选择多个文件。 现在我想在提交表单之前显示所选图像的预览。如何在 HTML 5 中做到这一点？

Answer 1

这是一个简单的示例，它通过将图像标签的 src 属性设置为对象 URL，使用 URL.createObjectURL 呈现缩略图:

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>