如何通过js实现图片预览功能【附实例代码】

2019-11-20 10:19:21

字体：大中小

来源：转载

供稿：网友

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js图片预览功能</title><script language=javascript>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 = ""; }}</script></head><body><input type="file" onchange="previewFile()"><br><img src="" height="200" width="300" alt="Image preview..."/></body></html>

效果预览

效果图：