js兼容火狐显示上传图片预览效果的方法


Posted in Javascript onMay 21, 2015

本文实例讲述了js兼容火狐显示上传图片预览效果的方法。分享给大家供大家参考。具体实现方法如下:

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=GBK" http-equiv="Content-Type" /> 
<title>Image preview example</title>
<style type="text/css">
 div {width:100px;height:100px;border: 1px #A3BFE7 solid;}
 img {width:atuo;height:atuo;}
</style> 
<script type="text/javascript"> 
 function viewPic() { 
 var oFReader = new FileReader();
 oFReader.onload = function(e) {
 document.getElementById("uploadPreview").src = e.target.result;
 }
 if (document.getElementById("uploadImage").files.length === 0) { 
 return;
 } 
 var oFile = document.getElementById("uploadImage").files[0];
 oFReader.readAsDataURL(oFile);
} 
</script> 
</head> 
<body>
<input id="uploadImage" type="file" name="myPhoto" 
onchange='viewPic();'/><br>
<img id="uploadPreview" src=""/>
</body> 
</html>

运行效果如下图所示:

js兼容火狐显示上传图片预览效果的方法

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

Javascript 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vue--vuex详解
Apr 15 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
javascript去除空格方法小结
May 21 #Javascript
删除javascript所创建子节点的方法
May 21 #Javascript
png在IE6 下无法透明的解决方法汇总
May 21 #Javascript
javascript相关事件的几个概念
May 21 #Javascript
javascript实时显示当天日期的方法
May 20 #Javascript
JavaScript中String.prototype用法实例
May 20 #Javascript
实现无刷新联动例子汇总
May 20 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php中设置index.php文件为只读的方法
2013/02/06 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php异常处理方法实例汇总
2015/06/24 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
客户端静态页面玩分页
2006/06/26 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python如何给函数库增加日志功能
2020/08/04 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle