使用Javascript在本地浏览器中预览图片
本帖最后由 特洛伊剑客 于 2010-3-5 14:43 编辑很久很久以前，那时候还是IE的天下，使用Javascript预览本地图片实现起来非常简单，就是设置一下：
document.getElementById("image").src = "file:///" + document.getElementById("input").value;
不过出于安全的考虑，现在的浏览器都不允许...src = file:///...这样的写法，作为替代，IE可以使用“DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式，而Firefox则提供了一个getAsDataURL方法。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>preview</title>
<style>
#preview {
width: 270px;
height: 129px;
}
</style>
<!-->
<style>
#preview {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
</style>
<!-->
<script>
function preview(image)
{
if ("Microsoft Internet Explorer" == navigator.appName) {
document.getElementById("image").style.display = "none";
document.getElementById("preview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = image.value;
} else if ("Netscape" == navigator.appName){
document.getElementById("image").src = image.files.getAsDataURL();
} else {
alert("Not Support!");
}
}
</script>
</head>
<body>
<input type="file" onchange="preview(this);" />
<div id="preview">
<img id="image" src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
</body>
</html>
好帖！
页:
[1]