预览本地要上传图片

Question

用FileUpload或File控件上传图片是，在选择本地图片后预览图片？

Answer 1

<img src="FileUpload控件中图片的路径"  />

Answer 2

http://topic.csdn.net/u/20091224/16/F37B7C72-0AAF-4E9D-9BD5-9AF1FEFD48BE.html
很早以前的一个推荐的帖子！

Answer 3

推荐使用ajax上传 用户体验优势明显

Answer 4

你用ajax创建一个<img>的元件，把上传图片的地址设置在上面就可以啦

Answer 5

用服务器控件的例子：
<style type="text/css">
    #showdiv
    {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
</style> <!-- 必加这段样式表代码 -->function PreviewImgad(imgFile)
{    //新的预览代码，支持 IE6、IE7。
    var newPreview = document.getElementById("showdiv");
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    newPreview.style.width = "240px";
    newPreview.style.height = "22px";
}
<asp:FileUpload ID="fileupIcon" CssClass="input2" runat="server" onchange="javascript:PreviewImg(this);" /></p>
            <div id="showdiv">
            </div>
试试看  

Answer 6

<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 7

自己写的要么不兼容ie6要么不兼容火狐
最后用了很早以前有人提供的http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html
ie6 7 8 ff都兼容 

Answer 8

function viewimg(Img)
    {
        var mine = Img.value;
        if(mine!="")
        {
            mine=mine.toLowerCase().substring(mine.lastIndexOf('.'));
            if(mine!=".jpg")
            {
               Img.focus();
               document.execCommand("selectall");
               document.execCommand("delete");
               alert('头像必须是.jpg格式的');
               document.getElementById('ctl00_ContentPlaceHolder1_imgUserFace').src="";
            }  
             else
            {
                document.getElementById('ctl00_ContentPlaceHolder1_imgUserFace').src=Img.value;
            }  
        }
       
    }
<asp:FileUpload ID="fu_UserFace" onchange="viewimg(this)" runat="server" />