上传图片附件显示缩略图(2 位领导批示)-银子 ’s 博客-工作手记

上传图片附件显示缩略图(2 位领导批示)

刚开始以为很容易解决.写js嘛..-_,-+

< i nput type="file" onchange="document.getElementById('showimg').src=this.value;" />

然而本地测试成功的代码上传到服务器上就出现了错误..空格被自动转义成为了%20

无语ing….囧..

不过总算找到一个BT的方法..用CSS中的AlphaImageLoader滤镜 -_!!

AlphaImageLoader滤镜的使用方法就不做说明..自己查下手册

AlphaImageLoader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。

放出代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
#picshow
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:88px;
height:125px;
}
</style>
<script type="text/javascript" language="javascript">
<!--
function upimg(imgFile)
{
var picshow = document.getElementById("picshow");
picshow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
picshow.style.width = "88px";
picshow.style.height = "125px";
}
-->
</script>
</head>
<body>
<div id="picshow"></div>
<p>选择图片：<input type="file" size="20" onchange="upimg(this);" /></p>
</body>
</html>

DEMO

选择图片：

可惜的是FF不支持..SO这也不是最好的解决方法..

中华英才网上的ajax异步提交才是正解..可是那个需要进入表单时就会分配当前表单一个唯一的ID..而我做的功能上不能达到..只有暂舍FF..也许不久能找到更好的办法..

NOTE：本博内容大部分为原创，转载请注明出处。
永久链接：http://www.zdyi.com/up-image-thumbnails/73