利用createObjectURL或者FileReader去实现图片预览

小御姐

于 2024-04-25 16:09:54 发布

阅读量226

点赞数 3

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/stella_stella123/article/details/138153792

版权

本文介绍了如何通过HTML和JavaScript，利用`FileReader`和`createObjectURL`方法实现在用户选择文件后预览图片，展示了两种方式的代码实现及其工作原理。

摘要由CSDN通过智能技术生成

都是利用文件信息，通过FileReader或者createObjectURL去转换成浏览器可访问的url 或者 base64的方式去，给image src的赋值实现图片的预览

点击选择文件，从文件夹中选取文件，即可预览

一、URL.createObjectURL(url)写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <input type="file" id="fileInput">
  <br/>
  <img id="previewImage" alt="Preview Image">
  <script>
    const fileInput = document.getElementById('fileInput');
    const previewImage = document.getElementById('previewImage');
    fileInput.addEventListener('change', (e) => {
      const url = fileInput.files[0]; // 获取文件信息
      let tempUrl = URL.createObjectURL(url) // 传入用于创建 URL 的 File 对象、Blob 对象
      console.log(tempUrl); // blob:http://127.0.0.1:5500/e4eb3ef7-23eb-40df-99a6-2267d61af9a5
      previewImage.src = tempUrl;
      URL.revokeObjectURL() //当不再需要这些 URL 对象时,通过它释放掉
    });
  </script>
</body>

</html>

二、new FileReader()写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <input type="file" id="fileInput">
  <br/>
  <img id="previewImage" alt="Preview Image">
  <script>
    const fileInput = document.getElementById('fileInput');
    const previewImage = document.getElementById('previewImage');
    fileInput.addEventListener('change', (e) => {
      const url = e.target.files[0]; // 获取文件信息
      let reader = new FileReader()// 允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
      reader.readAsDataURL(url) // 会读取指定的 Blob 或 File 对象,且读取完成会触发loadend事件，
      reader.onload = (e) => { // 同时result属性会包含一个 data:URL 格式的字符串，浏览器就可以识别
        previewImage.src = e.target.result;
      }
    });
  </script>
</body>

</html>

详细说明每步实现原因，做个记录