html5 实现图片预览

2401_84152719

于 2024-04-12 08:49:17 发布

阅读量369

点赞数 5

分类专栏：程序员文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2401_84152719/article/details/137665349

版权

本文介绍了HTML5中实现图片预览的两种方法，包括使用FileReader和URL.createObjectURL。通过实例代码展示了如何创建FileReader对象以及利用URL对象进行图片预览，确保在不同浏览器下的兼容性。此外，作者分享了自己的前端开发经验，提供了一份全面的前端学习资源，旨在帮助开发者提升技能。

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

图片预览效果

====================================================================

还是先直接给出 demo 吧，大家可以运行这个 demo 先来看一下效果：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>blob-fileRender</title> <style> #prev1, #prev2 { height: 400px; width: 100%; } img { height: 100%; } </style> </head> <body> <div id="prev1"> <input type="file" id="file1" accept="image/*"> <br> <img src="" alt="" id="view1"> </div> <br><br> <div id="prev2"> <input type="file" id="file2" accept="image/*"> <br> <img src="" alt="" id="view2"> </div> <script> document.getElementById("file1").addEventListener('change', function(){ var