asp.net(c#)一次预览并上传多张图片

用asp.net开发网站时，经常要上传图片，现在IE7出现，原来的img.src='xxx.jpg'这种预览方式已经失效。本文介绍新的上传前预览图片的处理方式。代码很简单，直接贴代码了。

aspx文件代码：

 
 

  
  
  
  <%
  
  @ Page Language
  
  =
  
  "
  
  C#
  
  "
  
   AutoEventWireup
  
  =
  
  "
  
  true
  
  "
  
   CodeBehind
  
  =
  
  "
  
  Default.aspx.cs
  
  "
  
   Inherits
  
  =
  
  "
  
  UploadPicture._Default
  
  "
  
   
  
  %>
  
  




  
  <!
  
  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  
  >
  
  




  
  <
  
  html 
  
  xmlns
  
  ="http://www.w3.org/1999/xhtml"
  
   
  
  >
  
  


  
  <
  
  head 
  
  runat
  
  ="server"
  
  >
  
  

    
  
  <
  
  title
  
  >
  
  无标题页
  
  </
  
  title
  
  >
  
  


  
  <
  
  link 
  
  href
  
  ="http://www.svnhost.cn/style/public.css"
  
   rel
  
  ="stylesheet"
  
   type
  
  ="text/css"
  
   
  
  />
  
  


  
  </
  
  head
  
  >
  
  


  
  <
  
  body
  
  >
  
  


  
  <
  
  script 
  
  language
  
  ="javascript"
  
  >
  
  


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


  
  function
  
   CheckImgCss(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;

        
  
  //
  
  $('Image1').src = o.value;//这里IE7已经不支持了。所以才有上面的方法。
  
  


  
      }

}


  
  </
  
  script
  
  >
  
  

    
  
  <
  
  form 
  
  id
  
  ="form1"
  
   runat
  
  ="server"
  
  >
  
  

    
  
  <
  
  div
  
  ><
  
  h1
  
  >
  
  一次上传多个图片并预览，请选择图片：
  
  </
  
  h1
  
  >
  
  

        
  
  <
  
  asp:FileUpload 
  
  ID
  
  ="FileUpload1"
  
   onchange
  
  ="CheckImgCss(this, 'img');"
  
   runat
  
  ="server"
  
   
  
  />
  
  

        
  
  <
  
  asp:FileUpload 
  
  ID
  
  ="FileUpload2"
  
   onchange
  
  ="CheckImgCss(this, 'img');"
  
   runat
  
  ="server"
  
   
  
  />
  
  

        
  
  <
  
  asp:Button 
  
  ID
  
  ="Button1"
  
   runat
  
  ="server"
  
   OnClick
  
  ="Button1_Click"
  
   Text
  
  ="上传"
  
   
  
  />
  
  

        
  
  <
  
  div 
  
  id
  
  ="img"
  
   style
  
  ="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:102px;height:100px;"
  
  ></
  
  div
  
  >
  
  

        
  
  </
  
  div
  
  >
  
  

    
  
  </
  
  form
  
  >
  
  


  
  <
  
  div
  
  >
  
  


  
  <
  
  iframe 
  
  src
  
  ="http://www.svnhost.cn"
  
   width
  
  ="1000"
  
   height
  
  ="1800"
  
   frameborder
  
  ="0"
  
   scrolling
  
  ="no"
  
  ></
  
  iframe
  
  >
  
  


  
  </
  
  body
  
  >
  
  


  
  </
  
  html
  
  >
  
  


 
 

 

 cs文件代码：

 

 
 

  
  
  
  using
  
   System;


  
  using
  
   System.Data;


  
  using
  
   System.Configuration;


  
  using
  
   System.Collections;


  
  using
  
   System.Web;


  
  using
  
   System.Web.Security;


  
  using
  
   System.Web.UI;


  
  using
  
   System.Web.UI.WebControls;


  
  using
  
   System.Web.UI.WebControls.WebParts;


  
  using
  
   System.Web.UI.HtmlControls;




  
  namespace
  
   UploadPicture

{

    
  
  public
  
   
  
  partial
  
   
  
  class
  
   _Default : System.Web.UI.Page

    {

        
  
  //
  
  该变量用来修改的的时候的默认值。例如上传自己的头像，如果用户修改头像，这里可以显示他原来的头像。
  
  


  
          
  
  public
  
   
  
  string
  
   pic 
  
  =
  
   
  
  "
  
  http://www.svnhost.cn/images/logo.gif
  
  "
  
  ;

        
  
  protected
  
   
  
  void
  
   Page_Load(
  
  object
  
   sender, EventArgs e)

        {



        }



        
  
  protected
  
   
  
  void
  
   Button1_Click(
  
  object
  
   sender, EventArgs e)

        {

            Random r 
  
  =
  
   
  
  new
  
   Random();

            
  
  //
  
  这样循环，可以同时上传多个文件。前台已经有文件格式的判断，有错误提示了。这里只要过滤掉非法文件即可，无需提示了。
  
  


  
              
  
  for
  
   (
  
  int
  
   i 
  
  =
  
   
  
  0
  
  ; i 
  
  <
  
   Request.Files.Count; i
  
  ++
  
  )

            {

                
  
  if
  
   (Request.Files[i].ContentLength 
  
  >
  
   
  
  0
  
  )

                {

                    
  
  string
  
   ex 
  
  =
  
   System.IO.Path.GetExtension(Request.Files[i].FileName).ToLower();

                    
  
  if
  
   (
  
  "
  
  .jpg.gif.png.bmp
  
  "
  
  .Contains(ex))

                    {

                        
  
  string
  
   newFileName 
  
  =
  
   DateTime.Now.ToString(
  
  "
  
  yyyyMMddHHmmss
  
  "
  
  ) 
  
  +
  
   r.Next(
  
  100
  
  , 
  
  999
  
  ).ToString() 
  
  +
  
   ex;

                        
  
  //
  
  保存文件名到数据库

                          
  
  //
  
  xxxxxxxxxxxxxxxx

                        
  
  //
  
  xxxxxxxxxxxxxxxx
  
  


  
  

                        Request.Files[i].SaveAs(Server.MapPath(newFileName));

                        pic 
  
  =
  
   newFileName;

                    }

                }

            }

        }

    }

}