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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
jquery键盘事件介绍
Jan 31 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
php字符串操作常见问题小结
2016/10/11 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Django model class Meta原理解析
2020/11/14 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
主治医师岗位职责
2013/12/10 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS