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 相关文章推荐
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
生成二维码方法汇总
Dec 26 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
Element InputNumber计数器的使用方法
Jul 27 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php图片裁剪函数
2018/10/31 PHP
javascript cookies操作集合
2010/04/12 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
Python数据持久化shelve模块用法分析
2018/06/29 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
高三自我鉴定范文
2013/10/19 职场文书
美食节策划方案
2014/05/26 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
技术入股合作协议书
2016/03/21 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python