几行代码实现原生js实现图片预览

Dear 丶 2022-12-03 02:21 175阅读 0赞

### 几行代码实现原生js实现图片预览 ###

使用原生js实现对图片选择后的预览  
更多的更详细的使用说明，可浏览MDN的FileReader：[https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader][https_developer.mozilla.org_zh-CN_docs_Web_API_FileReader]

实现步骤

1.  监听`input file`的 `onchange`事件
2.  新建`FileReader`对象`fr`，并对此`fr`对象进行`onload`监听
3.  `fr`对象使用`readAsDataURL`读取文件，触发`onload`事件
4.  在`onload`事件获取文件`base64`信息并使用`img src`渲染

浏览器支持：  
IE10+  
其他浏览器支持情况可查看caniuse，MDN同样也有说明支持情况: [https://caniuse.com/\#search=filereader][https_caniuse.com_search_filereader]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <input type="file" name="file" onchange="onImgFileChanged(this)">
        <img id="img" src="" >
        
        <script type="text/javascript"> function onImgFileChanged(source) { let fr = new FileReader(); fr.onload = function(e) { console.log(e); document.querySelector('#img').src = e.target.result; } fr.readAsDataURL(source.files[0]); } </script>
    </body>
    </html>

[https_developer.mozilla.org_zh-CN_docs_Web_API_FileReader]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
[https_caniuse.com_search_filereader]: https://caniuse.com/#search=filereader

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现上传图片前预览效果

![20190911145342907.png][] $(function() \{ $("\file").change(function() \{ ...

Myth丶恋晨/ 2024年04月18日 20:09/ 0 赞/ 155 阅读

相关如何简单实现视频预览和图片预览

> 工作需要做一个视频预览和图片预览，于是就发现了一个简单省事的预览方法，供大家参考一下，请多指教啊 var videoExts = [".avi", ".mp4",

小灰灰/ 2023年07月25日 06:14/ 0 赞/ 95 阅读

相关纯js实现点击预览图片效果

效果如图所示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

灰太狼/ 2023年06月20日 10:53/ 0 赞/ 796 阅读

相关几行代码实现原生js实现图片预览

几行代码实现原生js实现图片预览使用原生js实现对图片选择后的预览更多的更详细的使用说明，可浏览MDN的FileReader：[https://developer

Dear 丶/ 2022年12月03日 02:21/ 0 赞/ 176 阅读

相关上传图片预览JS脚本 Input file图片预览的实现示例

需要一个用户上传头像预览的功能，因此写了一段上传图片预览JS脚本,Input file图片预览的实现，需要的朋友可以看看好东西要分享！在深圳做项目的时候，需要

快来打我*/ 2022年07月27日 12:00/ 0 赞/ 360 阅读

相关 js实现上传图片事实预览

html部分 <img alt="" id="img" > <input type="file" onchange='PreviewImage(this

分手后的思念是犯贱/ 2022年07月12日 23:08/ 0 赞/ 428 阅读

相关 js实现上传图片预览的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月16日 07:11/ 0 赞/ 348 阅读

相关原生js+css实现带预览图片的幻灯片效果实例

先总结一下，里面的用到的关键知识点 CSS中用到的知识点有：过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的

向右看齐/ 2022年05月27日 03:25/ 0 赞/ 191 阅读

相关 js 实现异步上传图片+预览

两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。 ![复制代码][copycode.gif] <!DOCTYPE html>

我不是女神ヾ/ 2022年05月06日 20:28/ 0 赞/ 478 阅读

相关原生js多图片上传并预览

因为原生JS比较通用，不管你前端用的什么框架，基本可以使用这套写法，也是参考网上的，自己写的不完善，基本提供一个思路，勿喷！！ html 代码，input标签里面一定要有m

悠悠/ 2022年01月31日 13:39/ 0 赞/ 536 阅读