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 相关文章推荐
单元选择合并变色示例代码
May 26 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
深入学习JavaScript对象
Oct 13 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
原生js实现Flappy Bird小游戏
Dec 24 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 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 基础教程(四)
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
axios学习教程全攻略
2017/03/26 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Vue渲染过程浅析
2019/03/14 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python 动态加载的实现方法
2017/12/22 Python
Python装饰器用法实例分析
2019/01/14 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
css3 transform属性详解
2014/09/30 HTML / CSS
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
STP的判定过程
2012/10/01 面试题
《维生素c的故事》教学反思
2014/02/18 职场文书
求职自荐信的格式
2014/04/07 职场文书
法人身份证明书
2014/10/08 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
python实现剪贴板的操作
2021/07/01 Python
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技