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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
深入理解javascript变量声明
Nov 20 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 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 无限极分类
2008/03/27 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
表单提交验证类
2006/07/14 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
SQLite3中文编码 Python的实现
2017/01/11 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python标记语句块使用方法总结
2019/08/05 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
Servlet如何得到客户端机器的信息
2014/10/17 面试题
寒假思想汇报
2014/01/10 职场文书
大学信息公开实施方案
2014/03/09 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
父母教会我观后感
2015/06/17 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
财产分割协议书
2016/03/22 职场文书