多圖片上傳+圖片預覽，兼容所有瀏覽器 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"/>
<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