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轻松实现Ajax的实例代码
Aug 16 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
javascript常用方法汇总
Dec 02 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解webpack自定义loader初探
Aug 29 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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中文乱码
2009/11/26 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
javascript的BOM汇总
2015/07/16 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
javascript中this指向详解
2016/04/23 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python求最大连续子数组的和
2018/07/07 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
酒店副总经理岗位职责范本
2014/02/04 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
我的收音机情缘
2022/04/05 无线电