日期:2014-05-20  浏览次数:20369 次

FileUpload 如何预览选中的图片
使用asp.net (C#)

页面有一个FileUpload和一个Image控件,Image控件用来显示用户选中的图片,如何点击浏览找到需要的文件后,Image立即显示出所选的图片(不通过其他按钮来触发),请高手赐教!!!!

------解决方案--------------------
<style type="text/css">
#PreviewImg
{
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style>

function ShowImg(obj)
{
var AllowExt = ".jpg|.gif|.bmp|.png|";
var FileExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
if (AllowExt != 0 && AllowExt.indexOf(FileExt + "|") == -1) //判断文件类型是否允许上传

alert("您上传的不是图片!");
}
else
{

var newPreview = obj;

newPreview.innerHTML = "";
newPreview.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader").src = obj.value;
newPreview.style.width = "150px";
newPreview.style.height = "100px";
}
}


 <asp:FileUpload ID="FileUpload1" runat="server" onchange='ShowImg(this)' />
<div id="PreviewImg" />
------解决方案--------------------
<script language="javascript" type="text/javascript"> 
function PreviewImg(imgFile) 
{
var newPreview = document.getElementById("newPreview"); 
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; 
newPreview.style.width = "80px"; 
newPreview.style.height = "60px"; 

</script> 
<asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" /> 
<div id="newPreview"> </div> 


function $(o){return document.getElementById(o);} 
function CheckImg(o,img) 

if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value)) 

alert('只能上传jpg,bmp,gif,png格式图片!'); 
o.outerHTML = o.outerHTML; 

else 

$(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value; 



<asp:FileUpload ID="FileUpload1" runat="server" onchange="CheckImg(this, 'img');" /> 
<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= <%= pic%>,sizingMethod=scale);width:88px;height:113px;"> </div> 
public string pic=""; 
http://topic.csdn.net/u/20091102/13/284b7868-f996-4dae-9eba-c94c36ab526e.html