js如何实现图片预览

最新推荐文章于 2025-03-06 17:13:28 发布

IT_熊仔

最新推荐文章于 2025-03-06 17:13:28 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： js javascript url

本文链接：https://blog.youkuaiyun.com/IT_xiong/article/details/105738706

javaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种使用JavaScript实现图片预览的方法：通过file对象转换为URL及base64格式地址。前者适用于多数情况，后者虽消耗性能但在特定场景下有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js如何实现图片预览

介绍

介绍

很多新手玩家对于文件读取，图片读取都是只知皮毛，今天就给大家讲讲如何实现图片预览,实现方式有两种。

file对象转URL

为什么要转URl, 图片不能直接显示本地路径，会提示报错，所以我们要将file转成URL路径去赋值给img，直接上代码：

<html>
<head>
   <title>Title</title>
</head>
<body>
<hr/>
<br/>
<input type="file"  id="myFile1"/>
<img src="" id="preview_img" width="400px" height="400px" alt="">

<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>
<script>

   $("#myFile1").change(function () {
       //创建blob对象，浏览器将文件放入内存中，并生成标识
       var img_src = URL.createObjectURL($(this)[0].files[0]);
       //给img标检的src赋值
       document.getElementById("preview_img").src=img_src;
       //URL.revokeObjectURL(img_src);// 手动 回收，
   });
</script>
</body>
</html>

file对象转base64格式地址

这种做法相对消耗性能，不过对于数量较少的情况可以采用该办法，得到的结果为：
data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

<html>
<head>
   <title>Title</title>
</head>
<body>
<hr/>
<br/>
<input type="file"  id="myFile1"/>
<img src="" id="preview_img" width="400px" height="400px" alt="">

<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>
<script>

   $("#myFile1").change(function () {
      var fileReader = new FileReader();

      fileReader.readAsDataURL($(this)[0].files[0]);
      //异步加载
      fileReader.onload =function (event) {
          $("#preview_img").attr("src",event.target.result);
      }
   });

</script>
</body>
</html>