使用Javascript在本地浏览器中预览图片

发表于 2010-3-5 14:42

本帖最后由特洛伊剑客于 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>
<!--[if IE]>
<style>
#preview {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
</style>
<![endif]-->
<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[0].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>

复制代码

[/code]

发表于 2010-3-5 15:20

好帖！

		自动登录	找回密码
密码			注册创意安天

使用Javascript在本地浏览器中预览图片

相关帖子