js实现图片上传实时显示
在开发的时候经常遇到这样的需求,用户在上传图片的时候,想要看到自己上传的图片是否正确,这时候需要把用户上传的图片及时显示出来,然后等他点击上传的时候,程序再执行上传到服务器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="file" name="file" onchange="showPreview(this)" /> <img id="portrait" src="" style="display:none;" /> </body> </html> <script type="text/javascript"> function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); console.log(fr); var portrait = document.getElementById('portrait'); fr.onloadend = function(e) { portrait.src = e.target.result; }; fr.readAsDataURL(file); portrait.style.display = 'block'; } } </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步