惊艳！Html5 本地图片预览技巧

前言

在网页开发领域，常常会面临这样的需求场景：需要支持用户上传图片，并且要在上传操作执行前，实现图片预览功能。这一功能所带来的优势十分显著：用户在选择图片后，能够即刻确认图片的准确性，避免因选择错误图片而进行不必要的上传操作，从而有效节省服务器资源，优化用户体验。

今天，我们将一同深入探索如何运用原生JavaScript实现本地图片上传预览功能。在实现过程中，我们会用到两个常用的API，分别是FileReader和createObjectURL 。接下来，我们会对这两个API进行详细的原理讲解，并结合具体代码示例展开演示，让你能够轻松掌握这一实用的功能开发技巧。

准备工作：HTML 结构

首先，我们需要在 HTML 中搭建一个简单的结构，用于文件上传和图片预览。主要包含两个元素：

<input type="file">: 用于让用户选择本地文件。
<img>: 用于展示预览图片。

<!DOCTYPE html>
<html>
    <head>
        <title>本地图片上传预览</title>
    </head>
    <body>
        <h1>本地图片上传预览</h1>

        <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>

在上述HTML代码里：

<input type="file" id="imageUpload" accept="image/*"> 构建了一个文件上传控件。其中，id="imageUpload" 这个属性值，为后续通过JavaScript获取该元素提供了便利。而accept="image/*" 则对用户的文件选择范围进行了限制，仅允许用户选取图片类型的文件。这里的image/* 代表接受任意格式的图片文件，无论是常见的JPEG、PNG，还是其他图像格式，都在可选择之列。
<img id="imagePreview" src="#" alt="图片预览" style="..."> 创建了一个<img> 标签。id="imagePreview" 使得该元素易于被JavaScript定位和操作。src="#" 预先设置了一个无效的图片地址作为初始值，这是一种常见的占位策略，在图片未被正确加载前展示。alt="图片预览" 则定义了图片无法正常显示时所呈现的替代文字，以便用户了解该区域的用途。style="..." 用于设置图片预览区域的样式，包括最大宽度、最大高度以及边框样式等。这些样式属性可依据实际项目的设计需求灵活调整，以适配不同的页面布局和视觉效果。

方法一：运用FileReader API

FileReader堪称功能强大的API，它能够以异步方式读取用户本地文件内容。在图片预览功能的实现中，我们可以借助FileReader将图片文件读取为Data URL。这种特殊的URL格式，包含了文件的完整内容，以一种数据编码的形式呈现。之后，只需将获取到的Data URL设置为<img>标签的src属性，便能轻松实现图片在网页上的预览效果。如此一来，用户在上传图片前，就能直观地查看图片内容，极大地提升了交互体验。

步骤 1：获取元素

首先，在 <script> 标签中，我们需要获取到 HTML 中的 input file 和 img 元素：

const imageUpload = document.getElementById('imageUpload');
const imagePreview = document.getElementById('imagePreview');

步骤 2：监听 change 事件

我们需要监听 input file 的 change 事件。当用户选择了文件后，这个事件会被触发。

imageUpload.addEventListener('change', function () {
    const file = imageUpload.files[0]; // 获取用户选择的文件
    if (file) {
        // 确保用户选择了文件
        // ... (FileReader 的代码将在这里编写) ...
    } else {
        // 如果用户没有选择文件，可以重置预览图片
        imagePreview.src = '#'; // 恢复默认的无效图片地址
        imagePreview.alt = '图片预览';
    }
});

步骤 3：创建 FileReader 对象并读取文件

在 change 事件处理函数中，我们需要创建 FileReader 对象，并使用 readAsDataURL() 方法来读取文件内容。 readAsDataURL() 方法会将文件读取为 Data URL 格式的字符串。

imageUpload.addEventListener('change', function () {
    const file = imageUpload.files[0];
    if (file) {
        const reader = new FileReader(); // 创建 FileReader 对象

        reader.onload = function (e) {
            // 当文件读取完成后，会触发 onload 事件
            imagePreview.src = e.target.result; // 将 Data URL 设置为 <img> 的 src 属性
            imagePreview.alt = file.name; // 可以将文件名设置为 alt 属性，增强可访问性
        };

        reader.readAsDataURL(file); // 开始读取文件，读取完成后会触发 onload 事件
    } else {
        imagePreview.src = '#';
        imagePreview.alt = '图片预览';
    }
});

代码解释：

const reader = new FileReader();：创建一个新的 FileReader 对象。
reader.onload = function(e) { ... }：设置 FileReader 的 onload 事件处理函数。当文件读取成功后，这个函数会被调用。
- e.target.result：在 onload 事件中， e.target.result 属性包含了读取到的文件内容，对于 readAsDataURL() 方法来说，这里就是 Data URL 字符串。
- imagePreview.src = e.target.result;：将 Data URL 字符串设置为 imagePreview (即 <img> 标签) 的 src 属性，浏览器会自动解析 Data URL 并显示图片。
- imagePreview.alt = file.name;：可选操作，将上传的文件名设置为 <img> 标签的 alt 属性，这有助于提高页面的可访问性。
reader.readAsDataURL(file);：调用 reader 的 readAsDataURL() 方法开始异步读取文件。参数 file 就是用户选择的文件对象。

完整代码示例 (FileReader 方法):

<!DOCTYPE html>
<html>
    <head>
        <title>本地图片上传预览 (FileReader)</title>
    </head>
    <body>
        <h1>本地图片上传预览 (FileReader)</h1>

        <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>
            const imageUpload = document.getElementById('imageUpload');
            const imagePreview = document.getElementById('imagePreview');

            imageUpload.addEventListener('change', function () {
                const file = imageUpload.files[0];
                if (file) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        imagePreview.src = e.target.result;
                        imagePreview.alt = file.name;
                    };

                    reader.readAsDataURL(file);
                } else {
                    imagePreview.src = '#';
                    imagePreview.alt = '图片预览';
                }
            });
        </script>
    </body>
</html>

方法二：运用createObjectURL API

createObjectURL（更准确地表述为URL.createObjectURL() ），是另一个用于生成临时URL的强大API。它与FileReader有着显著区别，createObjectURL的独特之处在于，它直接针对文件对象创建一个临时URL。这个临时URL是浏览器内部生成的一个指向文件对象的链接，它具备即时可用的特性。通过将这个临时URL直接设置为<img>标签的src属性，就能在无需读取文件具体内容的情况下，实现图片的预览。这种方式简化了操作流程，提高了效率，为图片预览功能的实现提供了一种更为便捷的途径。

步骤 1 & 步骤 2：获取元素和监听 change 事件 (与 FileReader 方法相同)

这部分代码和 FileReader 方法完全一样，您可以直接复制粘贴。

const imageUpload = document.getElementById('imageUpload');
const imagePreview = document.getElementById('imagePreview');

imageUpload.addEventListener('change', function () {
    const file = imageUpload.files[0];
    if (file) {
        // ... (createObjectURL 的代码将在这里编写) ...
    } else {
        imagePreview.src = '#';
        imagePreview.alt = '图片预览';
    }
});

步骤 3：使用 createObjectURL 创建临时 URL

在 change 事件处理函数中，使用 URL.createObjectURL(file) 方法为选择的文件对象创建一个临时 URL，并将其设置为 <img> 的 src 属性。

imageUpload.addEventListener('change', function () {
    const file = imageUpload.files[0];
    if (file) {
        const imageUrl = URL.createObjectURL(file); // 创建临时 URL
        imagePreview.src = imageUrl; // 将临时 URL 设置为 <img> 的 src 属性
        imagePreview.alt = file.name;
    } else {
        imagePreview.src = '#';
        imagePreview.alt = '图片预览';
    }
});

代码解释

const imageUrl = URL.createObjectURL(file);：调用URL.createObjectURL(file)方法，把用户选择的文件对象file作为参数传入。该方法会在浏览器内存中为这个文件对象生成一个对应的临时URL字符串。这个URL就如同文件在内存中的“虚拟地址”，通过它，浏览器能够快速定位到文件在内存中的存储位置。
imagePreview.src = imageUrl;：将刚刚生成的imageUrl赋值给imagePreview的src属性。如此一来，浏览器会依据这个临时URL，从内存中读取并加载对应的图片数据，从而在页面上实现图片的展示效果。

需要注意

createObjectURL所创建的URL具有临时性， 其本质指向的是浏览器内存中的文件数据。当用户关闭当前页面，或者文档从浏览器中卸载时，这些临时生成的URL会自动被浏览器回收并释放其所占用的系统资源，以此确保系统资源的合理利用。
如果希望手动释放通过createObjectURL创建的URL，可以调用URL.revokeObjectURL(imageUrl)方法。在简单的图片预览场景中，浏览器一般能够自动完成临时URL的管理工作。然而，在较为复杂的应用程序里，例如涉及处理大量文件上传预览，或者需要长时间维持页面运行状态的情况下，手动释放临时URL不失为一个良好的编程习惯，有助于优化内存使用，提升应用程序的稳定性和性能。

完整代码示例 (createObjectURL 方法):

<!DOCTYPE html>
<html>
    <head>
        <title>本地图片上传预览 (createObjectURL)</title>
    </head>
    <body>
        <h1>本地图片上传预览 (createObjectURL)</h1>

        <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>
            const imageUpload = document.getElementById('imageUpload');
            const imagePreview = document.getElementById('imagePreview');

            imageUpload.addEventListener('change', function () {
                const file = imageUpload.files[0];
                if (file) {
                    const imageUrl = URL.createObjectURL(file);
                    imagePreview.src = imageUrl;
                    imagePreview.alt = file.name;
                } else {
                    imagePreview.src = '#';
                    imagePreview.alt = '图片预览';
                }
            });
        </script>
    </body>
</html>

两种方法的比较

在实现本地图片上传预览功能时，FileReader和createObjectURL (URL.createObjectURL)各有其特点。以下是对这两种方法的详细比较：

特性	FileReader	createObjectURL (URL.createObjectURL)
兼容性	`FileReader` 兼容性较好，支持较老版本的浏览器。因此，在需要高浏览器兼容性的项目中，`FileReader` 是个不错的选择，能减少因浏览器版本差异导致的功能缺失。	`createObjectURL` 兼容性良好，主流现代浏览器均支持。但一些非常老旧的浏览器可能不支持，因此需考虑目标用户的浏览器使用情况。
性能	处理大文件时，`FileReader` 需要将文件读取并编码为 Data URL，这个过程可能耗费较多时间和资源，尤其是对于大图片文件。	`createObjectURL` 处理大文件时性能优越，因为它直接创建指向内存数据的临时 URL，不需要复杂的读取和编码，能快速生成预览 URL。
数据处理	`FileReader` 将文件读取为 Data URL，即一个 Base64 编码的字符串，可用于 `<img>` 标签的 `src` 属性，实现图片预览。这种方式便于数据传输和存储。	`createObjectURL` 直接生成一个指向内存数据的临时 URL，通过 `<img>` 标签的 `src` 属性加载图片，无需编码，直接利用内存数据展示。
持久化	Data URL 可以持久化保存，比如存储在数据库中，适用于需要长期保存图片数据的场景。	临时 URL 仅用于当前页面，无法持久化。页面关闭或卸载后，URL 失效。因此需注意临时 URL 的生命周期。
代码复杂度	使用 `FileReader` 时，代码相对复杂，需要处理异步读取和错误处理，以确保功能稳定。	`createObjectURL` 实现简单，只需生成临时 URL 并设置为 `<img>` 的 `src` 属性，代码结构清晰，易于维护。
资源释放	使用 `FileReader` 时，资源管理由浏览器自动处理，无需显式释放。	`createObjectURL` 创建的临时 URL，建议在复杂场景中手动调用 `URL.revokeObjectURL` 释放资源，以防资源泄漏。
优点	优势在于兼容性好，并且 Data URL 可持久化，适合需要长期保存的数据场景。	优势在于性能出色和代码简洁，尤其在处理大文件时，能够提供流畅的用户体验。
缺点	处理大文件时性能较差，生成的 Data URL 字符串较长，可能占用较多内存和带宽。	兼容性稍逊，临时 URL 不可持久化，需注意生命周期和资源释放。
适用场景	适合需要兼容旧版浏览器和持久化保存图片数据的项目。	适合追求性能、处理大文件以及无需持久化数据的场景。

通过以上比较，开发者可以根据项目需求选择适合的方法来实现本地图片上传预览功能。

如何选择？

如果注重兼容性，或者需要将图片数据持久化保存，可以选择 FileReader。
如果更注重性能，尤其是处理大文件，并且不需要持久化保存图片数据，可以选择 createObjectURL。 对于大多数现代网页应用来说， createObjectURL 通常是一个更优的选择，因为它更简洁高效。

总结

好了，让我们来对 FileReader 和 createObjectURL 这两种实现本地图片上传预览功能的方式进行一个简单的总结。

FileReader 就如同一位踏实可靠的伙伴：

优点：它具备出色的兼容性，能够很好地适配各种不同版本的浏览器，即使是一些较为老旧的浏览器也能正常使用。并且，其生成的数据格式（Data URL）具有可持久化的特点，这意味着可以将其保存下来，以备后续使用，比如存储在数据库中供随时调用。
缺点：在处理大文件时，由于需要对文件进行读取和编码为 Data URL 的操作，会耗费相对较多的时间和系统资源，因此处理速度会稍显缓慢。
适用场景：当项目需要兼容老版本的浏览器，或者在业务流程中存在需要保存图片数据的需求时，FileReader 是一个非常合适的选择。

createObjectURL 则像是一位行事果断的急性子：

优点：运行速度极快，尤其是在处理大文件的图片预览时，能够迅速地创建临时 URL，实现快速预览，效率极高。同时，其代码实现简洁明了，不需要处理复杂的事件和回调，大大降低了开发的难度和工作量。
缺点：它所创建的临时链接仅在当前页面有效，一旦页面关闭或卸载，链接就会失效，无法进行持久化保存，这在一定程度上限制了它的使用场景。虽然它的兼容性也相对较好，但相较于 FileReader 而言，对于一些非常老旧的浏览器版本可能不太支持，不过在大多数现代项目中，这种兼容性问题并不影响其正常使用。
适用场景：如果项目对速度有较高的要求，只需要在当前页面中完成图片的预览操作，而不需要对图片数据进行保存，那么 createObjectURL 无疑是最佳的选择。

如何抉择？

若追求稳妥可靠，且有保存图片数据的需求：优先选择 FileReader。
若更看重速度，且不需要保存图片数据：那么 createObjectURL 会是更好的选择。

总之，在实际开发中，根据项目的具体需求和实际情况，灵活选择合适的方法即可。

文章来源： https://study.disign.me/article/202508/13.local-image-preview.md

发布时间: 2025-02-20

作者： 技术书栈编辑