如何使用 javascript 在 html 中显示上传的图像(1)

📌 相关文章

📜 如何使用 javascript 在 html 中显示上传的图像(1)

📅 最后修改于: 2023-12-03 15:23:52.820000 🧑 作者: Mango

如何使用 JavaScript 在 HTML 中显示上传的图像

当用户上传图像后，我们通常需要将其显示在页面上。这可以通过 JavaScript 来完成。本文将介绍如何使用 JavaScript 在 HTML 中显示上传的图像。

步骤

创建一个 HTML 页面，将上传按钮和图像容器添加到页面。示例代码如下：

<input type="file" id="upload-btn">
<div id="image-container"></div>

监听上传按钮的 change 事件，当文件被选择时，获取文件对象。

const uploadBtn = document.getElementById("upload-btn");

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

将文件对象转换为可显示的 URL。我们可以使用 FileReader API 来读取文件内容，并将其转换为 URL。

const reader = new FileReader();

reader.addEventListener("load", (event) => {
  const imageUrl = event.target.result;
});

reader.readAsDataURL(file);

创建图像元素并将 URL 添加到其中。然后将图像元素添加到图像容器中。

const image = new Image();

image.addEventListener("load", () => {
  const container = document.getElementById("image-container");
  container.appendChild(image);
});

image.src = imageUrl;

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传图像</title>
  </head>
  
  <body>
    <input type="file" id="upload-btn">
    <div id="image-container"></div>
    
    <script>
      const uploadBtn = document.getElementById("upload-btn");
      
      uploadBtn.addEventListener("change", (event) => {
        const file = event.target.files[0];
        
        const reader = new FileReader();
        
        reader.addEventListener("load", (event) => {
          const imageUrl = event.target.result;
          
          const image = new Image();
          
          image.addEventListener("load", () => {
            const container = document.getElementById("image-container");
            container.appendChild(image);
          });
          
          image.src = imageUrl;
        });
        
        reader.readAsDataURL(file);
      });
    </script>
  </body>
</html>

总结

我们可以使用 JavaScript 和 FileReader API 来显示上传的图像。我们首先将文件转换为 URL，然后创建一个图像元素并将 URL 添加到其中，最后将图像元素添加到图像容器中。