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