图片预览！分不是问题！

Question

我用FileUpLoad控件上传图片！
  想做一个预览效果！
 求那位高手给个代码！
  谢了！
    网上搜了好多!都是静态页面的！
  复制到asp.net中好像都不能用！
 求给个asp.net中的代码！
 谢了！
就剩27了！全发了！

Answer 1

您只用在静态的file 控件后面加一个 runat="server"

Answer 2

用静态的file怎么上传？？

Answer 3

<script type="text/javascript" language="javascript">
//预览图片
function previewImg(upimg){
         var preview=document.getElementById("preview");
         preview.innerHTML="<img width=150 src='"+upimg+"'/>";
}
</script><asp:FileUpload ID="FileUpload1" onpropertychange="previewImg(this.value)" runat="server" />

Answer 4

<div id="preview" align="center"></div>

Answer 5

给个传送门：
http://topic.csdn.net/u/20100430/14/3a099133-7074-4eee-8d79-75c01085581c.html

Answer 6

我仅仅需求asp.net程序！
   也就是用fileUpLoad上传的代码！
  其他的不需要啊！

Answer 7

 protected void Button7_Click(object sender, EventArgs e)
        {
            bool fileIsValid = false;
        //如果确认了上传文件，则判断文件类型是否符合要求
            if (this.FileUpload1.HasFile)
            {
                //获取上传文件的后缀
                String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();
                String[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };
                //判断文件类型是否符合要求
                for (int i = 0; i < restrictExtension.Length; i++)
                {
                    if (fileExtension == restrictExtension[i])
                    {
                        fileIsValid = true;
                    }
                }
                //如果文件类型符合要求,调用SaveAsc方法实现上传,并显示相关信息
                if (fileIsValid == true)
                {
                    try
                    {                        
                        this.FileUpload1.SaveAs(Server.MapPath("~/images/") + FileUpload1.FileName);
                        //this.Label2.Text.Split("//");
                        Response.Write("<script>alert('上传成功!');</script>");
                        TextBox6.Text = this.FileUpload1.FileName;
                    }
                    catch
                    {
                        Response.Write("<script>alert('上传失败!');</script>");
                    }
                }
            }
        }

Answer 8

后台page_load中写：
this.FileUploadFristImg.Attributes.Add("onpropertychange", "showPic()");前台JS代码：
 function showPic(){
     document.getElementById("FristImg").src=document.getElementById("FileUploadFristImg").value;
    }前台控件：
 <asp:FileUpload ID="FileUploadFristImg" runat="server" />
 <asp:Image ID="FristImg" runat="server" Height="115px" ImageUrl="~/UpPic/products_images/products/temp.jpg"
                                    Width="100px" />

Answer 9

得用js fileupload 没有加载过后的事件，可以有个事件onpropertychange 或onchange事件 然后把方法（预览图片） 给它！

Answer 10

 function PreviewS() 
        { 
             var x = document.getElementById("FileUpload1");
             if(!x || !x.value) return; 
         var patn = /\.jpg$|\.jpeg$|\.gif$/i;  
        if(patn.test(x.value))
        { 
            document.getElementById("Image1").src = "../images/spacer.gif";
            document.getElementById("Image1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("FileUpload1").value; 
           
          }
        else
           {  x.value="";
              alert("您选择的似乎不是图像文件。");
           }
        
          
        }   <asp:FileUpload ID="FileUpload1" runat="server" Width="348px" onchange="PreviewS();"/></td>
 <asp:Image ID="Image1" runat="server" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:91px;"/></td>

Answer 11

楼主说的预览需要把图片存起来吗?这里有个把图片上传到服务器上之后展示的  protected void btnUp_Click(object sender, EventArgs e)
        {
            //得到上传的路径
            string path = Server.MapPath("Images/");
           //得到应用程序虚拟路径
           // string path1 = ApplicationPath + "/Images/";
            string path2=Server.MapPath("~/ico/");
            string type = System.IO.Path.GetExtension(FileUp.FileName).ToLower();
             if(FileUp.HasFile)
             {
                 if (type != ".jpg")
                {
                    Response.Write("<script>alert('文件类型不正确！')</script>");
                }
                else
                {
                  
                        string filename = this.FileUp.FileName;
                        if (FileUp.PostedFile.ContentLength > 1024 *2*1024)
                        {
                            Response.Write("<script>alert('文件不能大于2M！')</script>");
                        }
                        else
                        {
                            FileUp.SaveAs(path+FileUp.FileName);
                            this.ImShow.ImageUrl = "Images/" + FileUp.FileName;
                         
                       
                        }
                
                }
             }
            
        }

Answer 12

 <asp:Image ID="imgNewType" runat="server" Height="156px" Width="105px" /><br />
        <asp:FileUpload ID="fpImg" runat="server" onchange="test(this)" CssClass="txt"/>js:
 function test(a){
                var aa=document.getElementById("<%=imgNewType.ClientID %>");
                aa.src=a.value;
            }

Answer 13

<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

Answer 14

上面的代码最多也只能在 IE6 有效
http://topic.csdn.net/u/20091222/00/2DA91FF1-9BB2-431C-8DDF-BB3011D7EFBE.html

Answer 15

DXImageTransform.Microsoft.AlphaImageLoader
老是找不到这个资源！
  怎么回事儿？？
  使用上边的那个是不是要引用那个包？？？

Answer 16

新开一贴，奉上兼容ie、火狐、opear、谷歌浏览器的js预览图片代码

Answer 17

19楼正确，
这个和浏览器有关，ie7 和火狐基本都限制了本地访问文件的权限so只能使用图片滤镜绕过这个限制

Answer 18

还是用onchange事件的好,用onpropertychange会出问题的....

Answer 19

<asp:FileUpload ID="FileUpload2" runat="server" onpropertychange="document.all.Image1.src='file:///'+this.value"
                                    Height="20px" Width="220px" />
<td align="center" valign="middle" class="style12">
                                缩略图：
                            </td>
                            <td align="center" valign="middle" class="style9">
                                <asp:Image ID="Image1" runat="server" Height="100px" Width="187px" />
                            </td>