本文实例讲述了js实现的在本地预览图片功能。分享给大家供大家参考,具体如下:
移动web
<body> <form enctype="multipart/form-data" name="form1"> 上传文件:<input id="f" type="file" name="f" onchange="change()" /> 预览:<img id="preview" alt="" name="pic" width="300" height="150" /> </form> <script> function change() { var pic = document.getElementById("preview"); var file = document.getElementById("f"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js获取文件名的后缀 html5Reader(file); } function html5Reader(file){ var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var pic = document.getElementById("preview"); pic.src=this.result; } } </script> </body> </html>
网页题目:js实现的在本地预览图片功能示例-创新互联
文章起源:https://www.cdcxhl.com/article12/ceccdc.html
成都网站建设公司_创新互联,为您提供标签优化、做网站、网站制作、网站收录、小程序开发、虚拟主机
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联