javascript - 显示从文件选择器中选择的图像的图像缩略图

Question

我使用的是常规 HTML File Picker输入表单项以允许我的用户选择文件。我想向他们展示他们选择的文件的缩略图，因为他们需要选择很多图像，这可能会让人感到困惑。

有谁知道是否可以在不将其上传到服务器的情况下显示他们选择的图像？如果是，怎么办？

如果有人可以指出我的帖子或告诉我如何做到这一点，我们将不胜感激。

<input type="file" name="image" accept="image/*">

Answer 1

<!-- Create an <img> element to preview the image -->
<img id="image-preview" width="320">

<!-- The <input> can go anywhere in your page or <form>. Note the "onchange" attribute -->
<input type="file" name="image" accept="image/*" onchange="handleFileChange">

确保以下 JavaScript 位于上述 <img> 之后和 <input>元素。你可以把它放在你的 .js 中在页面末尾或 <script> 中加载的文件页面末尾的元素。

// Select the preview image element
const imgElement = document.getElementById('image-preview');

function handleFileChange(e) {
    // If no file was selected, empty the preview <img>
    if(!e.target.files.length) return imgElement.src = '';

    // Set the <img>'s src to a reference URL to the selected file
    return imgElement.src = URL.createObjectURL(e.target.files.item(0))
}