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


Posted in Javascript onMarch 30, 2016

实现代码:

<!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 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 #Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 #Javascript
jquery实现一个简单的表单验证实例
Mar 30 #Javascript
js实现密码强度检测【附示例】
Mar 30 #Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 #Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
php URL验证正则表达式
2011/07/19 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php微信公众号开发模式详解
2016/11/28 PHP
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python 内置函数汇总详解
2019/09/16 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
解决python3输入的坑——input()
2020/12/05 Python
Python与C/C++的相互调用案例
2021/03/04 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
自荐信写法介绍
2014/01/25 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
大学军训口号大全
2015/12/24 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
Golang表示枚举类型的详细讲解
2021/09/04 Golang
PHP遍历数组的6种方式总结
2021/11/17 PHP