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

最新推荐文章于 2023-08-20 00:17:46 发布

转载最新推荐文章于 2023-08-20 00:17:46 发布 · 283 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xinzheng/p/4520147.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的方法，可以在用户选择文件后立即在网页上预览所选的本地图片。此方法适用于多种浏览器，包括IE、Firefox和Chrome等。

<!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>