用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:
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 = reader.result;}if (file) {reader.readAsDataURL(file);} else {preview.src = "";}}<input type="file" οnchange="previewFile()"><br><img src="" height="200" alt="Image preview...">