编程 Javascript

轻松实现js图片预览功能

Posted in Javascript onJanuary 18, 2016

本文实例讲述了js实现图片预览的方法，自己以前写的一个，代码比较简洁，分享给大家供大家参考。具体如下：

一、效果预览

效果图：

轻松实现js图片预览功能

二、实现代码：

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

希望本文所述对大家的javascript程序设计有所帮助。

轻松实现js图片预览功能

- Author -

daliu_it

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

Javascript 相关文章推荐

用JTrackBar实现的模拟苹果风格的滚动条

Aug 06 Javascript

在js中单选框和复选框获取值的方式

Nov 06 Javascript

原生js实现淘宝首页点击按钮缓慢回到顶部效果

Apr 06 Javascript

jquery鼠标放上去显示悬浮层即弹出定位的div层

Apr 25 Javascript

jquery获得同源iframe内body下标签的值的方法

Sep 25 Javascript

两种方法基于jQuery实现IE浏览器兼容placeholder效果

Oct 14 Javascript

js通过iframe加载外部网页的实现代码

Apr 05 Javascript

JavaScript输出当前时间Unix时间戳的方法

Apr 06 Javascript

VUEJS实战之修复错误并且美化时间（2）

Jun 13 Javascript

JavaScript算法教程之sku（库存量单位）详解

Jun 29 Javascript

JS实现的加减乘除四则运算计算器示例

Aug 09 Javascript

浅谈layui 表单元素的选中问题

Oct 25 Javascript

jQuery插件Validate实现自定义表单验证

Jan 18 #Javascript

Jquery和angularjs获取check框选中的值的方法汇总

Jan 17 #Javascript

node.js+express制作网页计算器

Jan 17 #Javascript

JQuery实现网页右侧随动广告特效

Jan 17 #Javascript

Validform+layer实现漂亮的表单验证特效

Jan 17 #Javascript

javascript实现倒计时跳转页面

Jan 17 #Javascript

jQuery实现图片走马灯效果的原理分析

Jan 16 #Javascript