用JS实现上传图片前预览
上传预览我们可以这么写
<script language="javas
//此方法只能用在HTML页面中
function test(){
document.getElementById("showimg").src=document.getElementById("file1").value;
}
</script>
<img id="showimg">
<input type="file" id="file1" on
当我们把上面的代码原封不动的拷贝到aspx文件中,运行毫无反应，
原因在于 对安全的考虑限制image对本地文件的访问(即使你在
aspx应用程序中用一个html页面替换aspx页面也无济于事.)
google一下能用滤镜的方式解决此问题.
在要显示图片的地方加上这段：
<div id="divShow" style="width:274px;height:100px;FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);"></div>
sizingMethod：有三个选项
crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界
其中有一个src属性是指向图片路径的(必选的);
可以试一下
function ShowImage1(path){
document.getElementById("divShow").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}
<BODY MS_POSITIONING="GridLayout">
<form id="Form1" method="post">
<input type="file" on
<div id="divShow" style="width:274px;height:100px;FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);"></div>
</form>
浏览图片没问题，可是浏览小图Div会小，浏览大图可能会占据整个页面,我们希望以固定的大小显示所有的图片
可以使用他的scale属性.可是这个属性有个问题，浏览大图时，他会缩小原图，浏览小图时就惨了，他会放大小图，
使小图模糊不清。
我们添加个方法改变这种情况。
function setImg(o){
var img_width;
var img_height;
o.style.visibility = "visible";
img_width=o.offsetWidth; //o.offsetWidth对象的可见宽度
img_height=o.offsetHeight; //o.offsetWidth对象的可见高度
var width=274; //预定义宽
var height=100; //预定义高
var ratW; //宽的缩小比例
var ratH; //高的缩小比例
var rat; //实际使用的缩小比例
if(img_width<width && img_height<height)
{
//如果比预定义的宽高都小，原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod="image";
return;
}else{
//如果大的话，要把 sizingMethod改成scale; 如果属性是image,不管怎么改div的宽高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod="scale";
}
ratW=width/img_width;
ratH=height/img_height;
if(ratH<ratW)//选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;
img_width=img_width * rat;
img_height=img_height * rat;
o.style.width=img_width;
o.style.height=img_height;
}
修改ShowImage方法
function ShowImage(path){
//处理前是原图，先将其隐藏，
document.all.divShow.style.visibility="hidden";
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=path;
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod="image";
//过100毫秒后获取div的宽高.
setTimeout("setImg(document.all.divShow)",100);
//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
}
以上在IE7中测试通过.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
测试页面源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>上传图片前预览 </TITLE>
<script>
//此方法只能用在HTML页面中
function test(){
document.getElementById("showimg").src=document.getElementById("file1").value;
}
/*
google一下能用Microsoft.AlphaImageLoader滤镜解决此问题.此滤镜的主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，但是就IE5-IE6而言还是有一定的意义。
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
1 enabled：true/false 是否激活滤镜
2 sizingMethod：
01 crop：剪切图片以适应对象尺寸。
02 image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
03 scale：缩放图片以适应对象的尺寸边界
3 src属性是指向图片绝对或相对路径的(必选的);
此方法问题：浏览图片是没问题，可是浏览小图Div会小，浏览大图可能会占据整个页面,而我们希望以固定的大小显示所有的图片
*/
function ShowImage1(path){
document.getElementById("divShow").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}
/*
为了解决上面的问题，我们可以使用他的scale属性.可是如果用这个属性，在浏览大图时，他会缩小原图;浏览小图时，他会放大小图，使小图模糊不清。所以不能用此属性。最后我们添加下面的setImg(o)方法改变这种情况。
*/
function ShowImage(path){
//处理前是原图，先将其隐藏，
document.all.divShow.style.visibility="hidden";
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=path;
document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod="image";
//过100毫秒后获取div的宽高.
setTimeout("setImg(document.all.divShow)",100);
//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
document.all.divShow.style.border="1px solid #ccc";
}
function setImg(o){
var img_width;
var img_height;
o.style.visibility = "visible";
img_width=o.offsetWidth; //o.offsetWidth对象的可见宽度
img_height=o.offsetHeight; //o.offsetWidth对象的可见高度
var width=274; //预定义宽
var height=100; //预定义高
var ratW; //宽的缩小比例
var ratH; //高的缩小比例
var rat; //实际使用的缩小比例
if(img_width<width && img_height<height)
{
//如果比预定义的宽高都小，原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod="image";
return;
}else{
//如果大的话，要把 sizingMethod改成scale; 如果属性是image,不管怎么改div的宽高，都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod="scale";
}
ratW=width/img_width;
ratH=height/img_height;
if(ratH<ratW)//选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;
img_width=img_width * rat;
img_height=img_height * rat;
o.style.width=img_width;
o.style.height=img_height;
}
</script>
</HEAD>
<BODY MS_POSITIONING="GridLayout">
<!--
<img id="showimg">
<input type="file" id="file1" on
-->
<form id="Form1" method="post">
<input type="file" on
<div id="divShow" style="width:274px;height:100px;FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);"></div>
</form>
</BODY>
</HTML>
