多图片上传+图片预览，兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/

多图片上传+图片预览，兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/

本文提供了一种实现多文件上传的方法，如果是图片上传，则支持图片文件的预览，兼容所有的常用浏览器，代码简单。但是，需要注意的是：本方法可能会产生一点点垃圾文件，如果对此比较在意的话，可以把图片路径存入数据库，在“完成上载”的按钮里面，删除保存的文件，对于数据库没有删除的，则可以定期进行删除处理，这样就不会有垃圾文件的存在了。完整的源代码如下，直接拷贝即可运行：

MultiFileUpload.aspx  代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " MultiFileUpload.aspx.cs "
  Inherits = " MultiFileUplaod "   %>
<! 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  id ="Head1"  runat ="server" >
   < title ></ title >
</ head >
< body >
   < form  id ="form1"  runat ="server" >
   < asp:HiddenField  ID ="allFileSize"  runat ="server"  Value ="0"   />
   < table >
     < tr >
       < td  align ="right" >
        本地文件：
       </ td >
       < td >
         < asp:FileUpload  ID ="FileUpload1"  runat ="server"   />
         < asp:Button  ID ="btnAdd"  runat ="server"  Text ="添加文件"  OnClick ="btnAdd_Click"   />
       </ td >
     </ tr >
     < tr  style ="vertical-align:top" >
       < td  align ="right" >
        文件列表：
       </ td >
       < td >
         < asp:ListBox  ID ="lbxFile"  runat ="server"  Height ="145px"  Width ="245px"  CssClass ="txt" >
         </ asp:ListBox >
         < img  alt =""  src =""  style ="width: 100px; height: 100px; display: none;float:right"  id ="pre" runat ="server"   />
       </ td >
     </ tr >
     < tr >
       < td  align ="right" >
        预览：
       </ td >
       < td  id ="x"  runat ="server" >
       </ td >
     </ tr >
     < tr >
       < td  colspan ="2"  style ="text-align: center" >
         < asp:Button  ID ="btnDelete"  runat ="server"  Text ="删除文件"  OnClick ="btnDelete_Click" /> &nbsp;&nbsp;
         < asp:Button  ID ="btnPost"  runat ="server"  Text ="完成上传"  OnClick ="btnPost_Click"   />
       </ td >
     </ tr >
   </ table >
   </ form >
</ body >
</ html >

 

MultiFileUpload.aspx.cs C# 代码

using  System;
using  System.Collections.Generic;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Collections;
using  System.IO;

public   partial   class  MultiFileUplaod : System.Web.UI.Page
{
   private  String folder;
   private  String url;
   protected   void  Page_Load( object  sender, EventArgs e)
  {
    folder  =  Server.MapPath( " ~/temp " );
     if  ( ! Directory.Exists(folder))
      Directory.CreateDirectory(folder);

    lbxFile.Attributes.Add( " onchange " ,  " document.getElementById(' "   +  pre.ClientID  + " ').style.display='';document.getElementById(' "   +  pre.ClientID  +   " ').src=this.value.split('//|')[0] " );
  }
   protected   void  btnAdd_Click( object  sender, EventArgs e)
  {
     if  (FileUpload1.HasFile)
    {
      String guid  =  Guid.NewGuid().ToString();
      String newFileName  =  folder  +   " // "   +  guid  +  Path.GetExtension(FileUpload1.FileName);
      url  =  Page.ResolveUrl( " ~ " )  +   " temp/ "   +  guid  +  Path.GetExtension(FileUpload1.FileName);
       int  totalFileSize  =  Int32.Parse(allFileSize.Value);
       int  fileSize  =  FileUpload1.PostedFile.ContentLength;
       // 此处也可以限制单个文件的大小
       if  (totalFileSize  +  fileSize  >   1024   *   1024   *   100 )
      {
        Page.ClientScript.RegisterClientScriptBlock( typeof ( string ),  "" ,  @" <script>alert('总上传的文件超过了大小设置  1024 * 1024 ！')</script> " );
         return ;
      }
      FileUpload1.SaveAs(newFileName);
      ListItem item  =   new  ListItem();
      item.Text  =  FileUpload1.FileName;
      item.Value  =  url  +   " | "   +  newFileName;
       for  ( int  i  =   0 ; i  <  lbxFile.Items.Count; i ++ )
      {
         if  (lbxFile.Items[i].Text.Equals(FileUpload1.FileName, StringComparison.InvariantCultureIgnoreCase))
        {
          Page.ClientScript.RegisterClientScriptBlock( typeof ( string ),  "" ,  @" <script>alert('不能添加已经添加过的文件！')</script> " );
           return ;
        }
      }
      pre.Style[ " display " ]  =   "" ;
      pre.Src  =  url;
      totalFileSize  +=  fileSize;
      allFileSize.Value  =  totalFileSize.ToString();
      lbxFile.Items.Add(item);
      PreViewImage();
    }
  }
   protected   void  btnPost_Click( object  sender, EventArgs e)
  {
     // 对上传的文件进行进一步处理，或者退出弹出窗口等操作
     for  ( int  i  =  lbxFile.Items.Count  -   1 ; i  >   - 1 ; i -- )
    {
      lbxFile.Items.Remove(lbxFile.Items[i]);
    }
    Page.ClientScript.RegisterClientScriptBlock( typeof ( string ),  "" ,  @" <script>alert('上传成功！')</script> " );
  }

   protected   void  btnDelete_Click( object  sender, EventArgs e)
  {
     for  ( int  i  =  lbxFile.Items.Count  -   1 ; i  >   - 1 ; i -- )
    {
       if  (lbxFile.Items[i].Selected)
      {
        String value  =  lbxFile.Items[i].Value;
        lbxFile.Items.Remove(lbxFile.Items[i]);
         if  (File.Exists(value.Split( ' | ' )[ 1 ]))
        {
          File.Delete(value.Split( ' | ' )[ 1 ]);
        }
      }
    }
    PreViewImage();
    pre.Src  =   "" ;
    pre.Style[ " display " ]  =   " none " ;
  }
   private   void  PreViewImage()
  {
    String p  =   "" ;
     for  ( int  i  =   0 ; i  <  lbxFile.Items.Count; i ++ )
    {
      p  +=   " <img src=' "   +  lbxFile.Items[i].Value.Split( ' | ' )[ 0 ]  +   " ' style='width:100px;height:100px'> " ;
    }
    x.InnerHtml  =  p;
  }
}

另外，可以添加一个新的功能，在选择完毕文件后就立即上传，无需点击上传按钮，具体的代码是在Page_Load里面加上 FileUpload1.Attributes.Add("onchange", "document.getElementById('" + btnAdd .ClientID+ "').click();"); 一行代码即可。

VB.NET版本(要注意AutoEventWireup="true"的设置与Handles Me.Load的使用，否则，事件可能不执行。)

VB.NET 代码

Imports  System.Collections.Generic
Imports  System.Web
Imports  System.Web.UI
Imports  System.Web.UI.WebControls
Imports  System.Collections
Imports  System.IO


Partial   Class  MultiFileUpload
     Inherits  System.Web.UI.Page
     Private  folder  As   String
     Private  url  As   String
     Private   Const  SplitChar  As   Char   =   " | " c

     Protected   Sub  Page_Load( ByVal  sender  As   Object ,  ByVal  e  As  EventArgs)  Handles   Me .Load

        folder  =  Server.MapPath( " ~/temp " )
         If   Not  Directory.Exists(folder)  Then
            Directory.CreateDirectory(folder)
         End   If

        lbxFile.Attributes.Add( " onchange " , ( " document.getElementById(' "   +  pre.ClientID  + " ').style.display='';document.getElementById(' " )  +  pre.ClientID  +   " ').src=this.value.split('/|')[0] " )
     End Sub
     Protected   Sub  btnAdd_Click( ByVal  sender  As   Object ,  ByVal  e  As  EventArgs)
         If  FileUpload1.HasFile  Then
             Dim  g  As   String   =  Guid.NewGuid().ToString()
             Dim  newFileName  As   String   =  folder  +   " / "   +  g  +  Path.GetExtension(FileUpload1.FileName)
            url  =  Page.ResolveUrl( " ~ " )  &   " temp/ "   &  g  &  Path.GetExtension(FileUpload1.FileName)
             Dim  totalFileSize  As   Integer   =  Int32.Parse(allFileSize.Value)
             Dim  fileSize  As   Integer   =  FileUpload1.PostedFile.ContentLength
             ' 此处也可以限制单个文件的大小
             If  totalFileSize  +  fileSize  >   1024   *   1024   *   100   Then
                Page.ClientScript.RegisterClientScriptBlock( GetType (Page),  "" ,  " <script>alert('总上传的文件超过了大小设置  1024 * 1024 ！')</script> " )
                 Return
             End   If

            FileUpload1.SaveAs(newFileName)
             Dim  item  As   New  ListItem()
            item.Text  =  FileUpload1.FileName
            item.Value  =  url  &   " | "   &  newFileName
             For  i  As   Integer   =   0   To  lbxFile.Items.Count  -   1
                 If  lbxFile.Items(i).Text.Equals(FileUpload1.FileName, StringComparison.InvariantCultureIgnoreCase)  Then
                    Page.ClientScript.RegisterClientScriptBlock( GetType (Page),  "" ,  " <script>alert('不能添加已经添加过的文件！')</script> " )
                     Return
                 End   If
             Next
            pre.Style( " display " )  =   ""
            pre.Src  =  url
            totalFileSize  +=  fileSize
            allFileSize.Value  =  totalFileSize.ToString()
            lbxFile.Items.Add(item)
            PreViewImage()
         End   If
     End Sub
     Protected   Sub  btnPost_Click( ByVal  sender  As   Object ,  ByVal  e  As  EventArgs)
         ' 对上传的文件进行进一步处理，或者退出弹出窗口等操作
         For  i  As   Integer   =  lbxFile.Items.Count  -   1   To   0   Step   - 1
            lbxFile.Items.Remove(lbxFile.Items(i))
         Next
        Page.ClientScript.RegisterClientScriptBlock( GetType (Page),  "" ,  " <script>alert('上传成功！')</script> " )
     End Sub

     Protected   Sub  btnDelete_Click( ByVal  sender  As   Object ,  ByVal  e  As  EventArgs)
         For  i  As   Integer   =  lbxFile.Items.Count  -   1   To   0   Step   - 1
             If  lbxFile.Items(i).Selected  Then
                 Dim  value  As   String   =  lbxFile.Items(i).Value
                lbxFile.Items.Remove(lbxFile.Items(i))
                 If  File.Exists(value.Split(SplitChar)( 1 ))  Then
                    File.Delete(value.Split(SplitChar)( 1 ))
                 End   If
             End   If
         Next
        PreViewImage()
        pre.Src  =   ""
        pre.Style( " display " )  =   " none "
     End Sub
     Private   Sub  PreViewImage()
         Dim  p  As   String   =   ""
         For  i  As   Integer   =   0   To  lbxFile.Items.Count  -   1
            p  +=   " <img src=' "   +  lbxFile.Items(i).Value.Split(SplitChar)( 0 )  &   " ' style='width:100px;height:100px'> "
         Next
        x.InnerHtml  =  p
     End Sub

End Class