我悟了！原来本地图片预览还能这样搞

作者：蓝逸日期：2025-02-19 浏览：1086℃ 分类：分享

Hey, 我是 Immerse 本文首发于 [沉浸式趣谈] ，我的个人博客 https://yaolifeng.com 也同步更新。转载请在文章开头注明出处和版权信息。如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！

我悟了！原来本地图片预览还能这样搞在网页开发中，经常会遇到需要让用户上传图片并在上传前进行预览的需求。这样做的好处显而易见：用户可以立即看到自己选择的图片是否正确，避免了不必要的上传和服务器资源浪费，提升了用户体验。今天，我们就来一起学习如何使用原生 JavaScript 实现本地图片上传预览功能。我们将使用两种常用的 API：FileReader 和 createObjectURL，并分别进行详细讲解和示例演示。准备工作：HTML 结构首先，我们需要在 HTML 中搭建一个简单的结构，用于文件上传和图片预览。主要包含两个元素：

: 用于让用户选择本地文件。 : 用于展示预览图片。

<!DOCTYPE html>

本地图片上传预览

    <input type="file" id="imageUpload" accept="image/*" /> <br /><br />
    <img
        id="imagePreview"
        src="#"
        alt="图片预览"
        style="max-width: 300px; max-height: 300px; border:1px solid #ccc;"
    />

    <script>
        // JavaScript 代码将在这里编写
    </script>
</body>

在上面的 HTML 代码中：

创建了一个文件上传控件，id="imageUpload" 方便我们之后用 JavaScript 获取到它。accept="image/*" 限制了用户只能选择图片类型的文件，image/* 表示接受任何类型的图片文件。

创建了一个标签，id="imagePreview" 同样是为了方便 JavaScript 操作。src="#" 先设置一个默认的无效图片地址，alt="图片预览" 是当图片无法显示时的替代文字。style="..." 设置了图片预览区域的最大宽高和边框样式，您可以根据实际需求调整。

方法一：使用 FileReader API FileReader 是一个非常强大的 API ，它可以异步读取用户本地文件内容。对于图片预览来说，我们可以使用 FileReader 将图片文件读取为 Data URL，然后将其设置为标签的 src 属性，从而实现预览。步骤 1：获取元素首先，在