如何在本机反应中动态显示本地存储中的图像 - JavaScript

如果你正在构建一个 Web 应用程序，你可能需要从用户的本地存储中获取图像并动态显示它们。在本指南中，我们将展示如何使用 JavaScript 和 HTML5 File API 来实现这个目标。

步骤1：让用户选择要上传的图像

第一步是引导用户选择我们需要动态显示的图像。我们可以使用 HTML input 元素中的 file 类型，它可以让用户打开文件选择器并从他们的本地存储中选择所需的图像。

<input type="file" id="image-selector">

现在，我们有了一个文件选择器，但是我们需要检测当用户选择图像时，然后触发处理程序来加载该图像。

步骤2：加载图像数据

一旦用户选择图像，我们可以使用 File API 来获取该文件的数据。首先，我们需要获取用户选择的文件对象：

const fileSelector = document.getElementById('image-selector');

fileSelector.addEventListener('change', (event) => {
  const file = event.target.files[0];
});

然后，我们可以使用 FileReader 对象来读取文件的内容：

const reader = new FileReader();

reader.onload = (event) => {
  const imageUrl = event.target.result;
  // 将 imageUrl 当做 src 给 image 元素展示
};

reader.readAsDataURL(file);

一旦我们读取了文件的内容，我们可以将其作为 Data URL 发送回到我们的应用程序中。该 Data URL 中包含了文件的基本信息和编码数据，因此我们可以将其直接用作图像的 src 属性并展示在我们的 Web 应用程序中。

步骤3：展示图像

最后一步是将获取的图像数据展示到我们的 Web 应用程序中。首先，我们需要创建一个图像元素：

<img id="image-preview">

然后，我们可以将上一步中获取的 Data URL 内容设置为该图像元素的 src 属性：

const imagePreview = document.getElementById('image-preview');

reader.onload = (event) => {
  const imageUrl = event.target.result;
  imagePreview.setAttribute('src', imageUrl);
};

reader.readAsDataURL(file);

现在，我们的应用程序会在用户选择图像后立即加载该图像并将其动态显示到页面中。完成！

总结

本指南介绍了如何使用 JavaScript 和 HTML5 File API 动态显示从本地存储中选择的图像。我们首先让用户选择要上传的图像，然后使用 File API 读取所选文件的数据。最后，我们将数据 URL 设置为图像元素的 src 属性，并将其动态显示在我们的应用程序中。

希望本指南能够对你有所帮助！