HTML+JS实现本地图片预览(基础功能) 一、预览功能 二、程序代码 登录后复制 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML+JS实现本地图片预览</title> </head> <body> <input type="file" name="" accept="image/*,.jpeg" id="upload"> <img src="" alt="" class="preview"> <script> var input = document.querySelector("#upload"); var img = document.querySelector(".preview"); input.onchange = (e) => { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (event) { img.src = event.target.result; }; reader.readAsDataURL(file); }; </script> </body> </html> 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28. 原创作者: YangPC 转载于: https://blog.51cto.com/YangPC/11732561