首页 > 代码库 > Js实现input上传图片并显示缩略图
Js实现input上传图片并显示缩略图
用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:
FileReader 的 readAsDataURL()
先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可
具体代码如下:
function previewFile() { var preview = document.querySelector(‘img‘); var file = document.querySelector(‘input[type=file]‘).files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = http://www.mamicode.com/reader.result;""; } } <input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
查看效果: https://codepen.io/skura23/pen/aWBGBJ
Js实现input上传图片并显示缩略图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。