图片上传+图片预览

转自：http://dotnet.aspx.cc/file/Multi-Files-Upload-With-Preview.aspx

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

作者：孟宪会 阅读：7532 发表于：2010-09-27 14:04:14

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

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();"); 一行代码即可。