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 相关文章推荐
js常用自定义公共函数汇总
Jan 15 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JavaScript中的继承之类继承
May 01 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
Stop SQL Server
2007/06/21 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python默认参数调用方法解析
2020/02/09 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
企业车辆管理制度
2014/01/24 职场文书
暑期社会实践感言
2014/02/25 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
护理工作心得体会
2016/01/22 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书