【!!急!!】html与asp.net控件的问题(图片预览与获取路径)

Question

<script   language="javascript">
    function showsize() {
        document.getElementById("view").src = document.getElementById("file1").value;   
        var showimg = new Image();
        showimg.src = document.getElementById("file1").value;
    }
        
 </script>
<input name="file1"  runat="server"  type="file"   id="file1"   onChange="setTimeout('showsize()',10)">   
                  <input   type="submit"   name="Submit"   value="上传">   
                  <input   name="width"   type="hidden"   id="width">   
                  <input   name="height"   type="hidden"   id="height">                
 <p><img src="pic/upload.jpg"  runat="server"  alt="照片预览"   width=350   height=270   border=0   id=view></p>   麻烦你们把这段代码放到应用模板页的页面中的<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">//放置代码</asp:Content>中就会发现问题,点击浏览一张图片以后就无法实现预览图片.
如果把两个控件的runat="server"去掉或者放在没有应用模板页的页面中就可以实现预览了.
但是去掉了就达不到我的需求了.
我要实现的是浏览图片路径后可以实现图片预览并且要在后台代码能够获取到文件的路径..
或者不用JavaScript脚本就能实现图片预览的也可以..高手请解答!谢谢..

Answer 1

<%=file1.ClientID%>
<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="";  

Answer 2

可以是可以了..但是我不知道怎么控制图片的大小.
麻烦告诉我下..谢谢
<script>
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;
  }   
}   
</script>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="CheckImg(this, 'img');" />   
<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod=scale);width:12px;height:12px;"> </div>   
public string pic=""; 

Answer 3

汗  引用错了...可以是可以了..但是我不知道怎么控制图片的大小.
麻烦告诉我下..谢谢<script>
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;
  }   
}   
</script>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="CheckImg(this, 'img');" />   
<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod=scale);width:12px;height:12px;"> </div>   
public string pic="";