JS预览图像将本地图片显示到浏览器上


Posted in Javascript onAugust 25, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript"> 
/** 
* 从 file 域获取 本地图片 url 
*/ 
function getFileUrl(sourceId) { 
var url; 
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
url = document.getElementById(sourceId).value; 
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} 
return url; 
} /** 
* 将本地图片 显示到浏览器上 
*/ 
function preImg(sourceId, targetId) { 
var url = getFileUrl(sourceId); 
var imgPre = document.getElementById(targetId); 
imgPre.src = url; 
} 
</script> 
</head> 
<body> 
<form action=""> 
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 
<img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 #Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 #Javascript
javascript jq 弹出层实例
Aug 25 #Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 #Javascript
JS操作JSON要领详细总结
Aug 25 #Javascript
JS 两个字符串时间的天数差计算
Aug 25 #Javascript
js中onload与onunload的使用示例
Aug 25 #Javascript
You might like
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
对联广告js flash激活
2006/10/19 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
使用Python处理BAM的方法
2018/09/28 Python
python自动化之Ansible的安装教程
2019/06/13 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
学校十一活动方案
2014/02/01 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
会议新闻稿
2015/07/17 职场文书
行为规范主题班会
2015/08/13 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
js前端图片加载异常兜底方案
2022/06/21 Javascript