首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

如何通过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实现图片预览功能【附实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JS克隆，属性，数组，对象，函数实例分析
Nov 26 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
浅谈angular.copy() 深拷贝
Sep 14 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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
most_common(1) pip(1) Counter(1) 字典(3) SingleFlight(2) 脚手架(2) 并发(8) set(1) Next.js(1) frozenset(1)
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python bisect模块原理及常见实例
2020/06/17 Python
python和c语言哪个更适合初学者
2020/06/22 Python
美国最灵活的移动提供商：Tello
2017/07/18 全球购物
世界上最大的字体市场：MyFonts
2020/01/10 全球购物
俄罗斯领先的移动和数字设备在线商店：Svyaznoy.ru
2020/12/21 全球购物
linux面试题参考答案（5）
2014/09/01 面试题
自主招生自荐信范文
2013/12/04 职场文书
护士找工作求职信
2014/07/02 职场文书
授权委托书
2014/09/17 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle