编程 Javascript

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>

JS预览图像将本地图片显示到浏览器上

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

如何使用jQUery获取选中radio对应的值(一句代码)

Jun 03 Javascript

jQuery select表单提交省市区城市三级联动核心代码

Jun 09 Javascript

浅谈javascript对象模型和function对象

Dec 26 Javascript

javascript实现带下拉子菜单的导航菜单效果

May 14 Javascript

简介JavaScript中valueOf()方法的使用

Jun 05 Javascript

jquery代码实现多选、不同分享功能

Jul 31 Javascript

以WordPress为例讲解jQuery美化页面Title的方法

May 23 Javascript

selenium 与 chrome 进行qq登录并发邮件操作实例详解

Apr 06 Javascript

Angular5中提取公共组件之radio list的实例代码

Jul 10 Javascript

vue 实现axios拦截、页面跳转和token 验证

Jul 17 Javascript

JS开发富文本编辑器TinyMCE详解

Jul 19 Javascript

JS实现鼠标移动拖尾

Dec 27 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