如何通过js实现图片预览功能
2015-12-04 16:01
706 查看
一、效果预览
效果图:
二、实现代码:
效果图:
二、实现代码:
<!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 后台异步执行
- js类型的判定
- JavaScript闭包原理
- json规范
- javascript垃圾回收机制
- 纯js轮播效果(减速效果)待改进
- js函数中 "闭包"概念的简单认识
- 完美版js金钱正则表达式校验
- JS模拟百度文库评分
- JavaScript的匿名函数
- XML.ObjTree -- XML source code from/to JavaScript object like E4X
- javascript逻辑运算符“||”和“&&”
- js函数的实参对象arguments 和其2个属性callee、caller
- js返回上一页的方法
- 递归遍历json
- HTML中javascript的<script>标签使用方法详解
- JS -- 判断字符串中是否包含中文
- 将将List json 转成List<?>实体
- 详解JavaScript逻辑And运算符
- 一些js技巧函数