AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
js,图片预览

实现代码:

<!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>

效果预览

效果图:

以上这篇如何通过js实现图片预览功能【附实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


js,图片预览  
上一篇:用JS生成UUID的方法实例  下一篇:jquery $.trim()去除字符串空格的实现方法【附图例】