input框上传图片，利用createObjectURL或者FileReader去实现图片预览

小御姐@stella

于 2024-06-26 10:19:05 发布

阅读量371

点赞数 9

文章标签： javascript

本文链接：https://blog.csdn.net/qq_54548545/article/details/139981686

版权

createObjectURL或者FileReader去实现图片的预览

都是利用文件信息，通过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

最低0.47元/天解锁文章