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 相关文章推荐
深入理解javaScript中的事件驱动
May 21 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
今天是星期几的4种JS代码写法
2013/09/17 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python实现视频压缩功能
2020/12/18 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
十八大感想感言
2014/02/10 职场文书
党员干部承诺书
2014/03/25 职场文书
中介业务员岗位职责
2014/04/09 职场文书
建议书的格式
2014/05/12 职场文书
师德模范事迹材料
2014/06/03 职场文书
二年级学生期末评语
2014/12/26 职场文书
如何写辞职书
2015/02/26 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android