ASP.NET MVC - 單一檔案與多檔案上傳及下載管理

之前在 ASP.NET 寫過一篇「透過資料庫上傳下載檔案」，不過此方法有些缺點，例如，資料庫肥大，這些進入資料庫的檔案都是二進位儲存，所以就算是使用資料庫壓縮，會讓資料庫長的肥肥胖胖的。再來，如果你的架構比較大，是將Web Application與Database分開不同伺服器，那麼Web Application與Database之間的頻寬、Disk I/O成本也會大些。

我們來改來方式，將檔案上傳至Web Application特定目錄下，然後將此上傳檔案的資訊儲存至資料庫，這些資訊都是文字，所以對資料庫大小影響不大，就算是上萬十萬筆資訊，文字資料的壓縮率是非常不錯的。當我要下載檔案時，從資料庫取出檔案資訊，然後由Web Application的特定目錄讀出檔案，傳送給Browser進行下載。

以下以ASP.NET MVC實作，會有兩個部分，一是單一檔案上傳，二是多檔案上傳。

資料庫資料

我在 App_Data 裡新檔一個 Files.mdf，表格名稱 FileDown，Schema為

view sourceprint?

1	FileId, int, PK

2	FileName, nvarchar(50)

3	FileSize, nvarchar(50)

4	FileType, nvarchar(50)

5	FileVersion, nvarchar(50)

6	PostDate, datetime2(7)

7	UploadDate, datetime2(7)

8	rowguid, uniqueidentifier

在 Models 目錄下建立 FileModel.edmx 及 FileModel.Context.tt，FileModel.tt。(Entity Framework 4.1)

MVC 單一檔案上傳

新增 FileController.vb，把我們的架構先寫出來。

view sourceprint?

01	Imports System.IO

02

03	Public Class fileController

04	Inherits System.Web.Mvc.Controller

05

06

' 顯示檔案列表

07	Function Index() As ActionResult

08	Return View()

09	End Function

10

11	' 單一檔案上傳表單

12	Function Upload() As ActionResult

13	Return View()

14	End Function

15

16	' 處理單一檔案上傳

17	<HttpPost()>

18	Function Upload(upfile As HttpPostedFileBase, formData As FormCollection) As ActionResult

19	Return View()

20	End Function

21

22

' 多檔案上傳表單

23	Function MultiUpload() As ActionResult

24	Return View()

25	End Function

26

27

' 處理多檔案上傳

28	<HttpPost()>

29	Function MultiUpload(form As FormCollection) As ActionResult

30	Return View()

31	End Function

32

33

' 處理檔案下載

34	Function Download(id As Integer) As ActionResult

35	Return View()

36	End Function

我們一個一個來處理。

view sourceprint?

1

' 顯示檔案列表

2	Function Index() As ActionResult

3	Dim db As New FilesEntities

4	Return View(db.FileDown)

5	End Function

Index.aspx 內容

view sourceprint?

01	<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of UpDownFileFromDBMvc.FileDown))" %>

02

03	<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

04

檔案列表

05	</asp:Content>

06

07	<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

08

09	<h2>檔案列表</h2>

10

<ul>

11	<li><%: Html.ActionLink("單一檔案上傳", "Upload")%></li>

12	<li><%: Html.ActionLink("多檔案上傳", "MultiUpload")%></li>

13

</ul>

14

<table>

15

<tr>

16

<th>

17

FileId

18

</th>

19

<th>

20

FileName

21

</th>

22

<th>

23

FileSize

24

</th>

25

<th>

26

FileType

27

</th>

28

<th>

29	FileVersion

30

</th>

31

<th>

32

PostDate

33

</th>

34

<th>

35	UploadDate

36

</th>

37

<th>

38

rowguid

39

</th>

40

</tr>

41

42	<% For Each item In Model %>

43	<% Dim currentItem = item %>

44

<tr>

45

<td>

46	<%: Html.DisplayFor(Function(modelItem) currentItem.FileId) %>

47

</td>

48

<td>

49	<%: Html.ActionLink(currentItem.FileName, "download", New With {.id = currentItem.FileId})%>

50

</td>

51

<td>

52	<%: Html.DisplayFor(Function(modelItem) currentItem.FileSize) %>

53

</td>

54

<td>

55	<%: Html.DisplayFor(Function(modelItem) currentItem.FileType) %>

56

</td>

57

<td>

58	<%: Html.DisplayFor(Function(modelItem) currentItem.FileVersion) %>

59

</td>

60

<td>

61	<%: Html.DisplayFor(Function(modelItem) currentItem.PostDate) %>

62

</td>

63

<td>

64	<%: Html.DisplayFor(Function(modelItem) currentItem.UploadDate) %>

65

</td>

66

<td>

67	<%: Html.DisplayFor(Function(modelItem) currentItem.rowguid) %>

68

</td>

69

</tr>

70	<% Next %>

71

72

</table>

73

74	</asp:Content>

要注意的有 <%: Html.ActionLink(currentItem.FileName, "download", New With {.id = currentItem.FileId})%> ，上傳後，我們希望可以直接點擊檔案名稱就可以下載檔案，所以我們把原本的DisplayFor()改寫為Html.ActionLink()。

view sourceprint?

01	''' <summary>

02	''' MVC 單一檔案上傳

03	''' </summary>

04	''' <param name="upfile">上傳檔案</param>

05	''' <param name="formData">其他表單資料</param>

06	<HttpPost()>

07	Function Upload(upfile As HttpPostedFileBase, formData As FormCollection) As ActionResult

08	Using db As New FilesEntities

09

' 需有上傳檔案

10	If upfile IsNot Nothing Then

11	' 0 < 容量 < 4 MB

12	Dim MBSize As Integer = upfile.ContentLength / 1000 / 1000

13	If upfile.ContentLength > 0 AndAlso MBSize < 4 Then

14	Dim savePath As String = Path.Combine(Server.MapPath("~/Files/"), upfile.FileName)

15

16	' 只能上傳 7z 壓縮的檔案

17	If Path.GetExtension(savePath) <> ".7z" Then

18	ModelState.AddModelError("upfile", "檔案必須由 7z 壓縮才能上傳！")

19	Return View()

20

End If

21

22

' 日期需正確

23	If IsDate(formData("PostDate")) = False Then

24	ModelState.AddModelError("PostDate", "日期格式不正確！")

25	Return View()

26

End If

27

28

' 版本不得空白

29	If formData("FileVersion") = "" Then

30	ModelState.AddModelError("FileVersion", "請輸入此檔案的版本！")

31	Return View()

32

End If

33

34	' 檔案不存在，進行上傳儲存動作

35	If System.IO.File.Exists(savePath) = False Then

36

37

' 進行資料庫確認

38	Dim FileDuplicate As FileDown = (From f In db.FileDown

39	Where (f.FileName = upfile.FileName)

40	Select f).FirstOrDefault()

41

42

' 檔名未重複

43	If FileDuplicate Is Nothing Then

44

' 儲存至Disk

45	upfile.SaveAs(savePath)

46

47

' 設定檔案資訊

48	Dim file As New FileDown

49	file.FileName = upfile.FileName

50	file.FileSize = upfile.ContentLength

51	file.FileType = upfile.ContentType

52	file.PostDate = formData("PostDate")

53	file.FileVersion = formData("FileVersion")

54	file.UploadDate = Date.Now()

55	file.rowguid = Guid.NewGuid()

56

57	' 將檔案資訊儲存至資料庫

58	db.FileDown.Add(file)

59	db.SaveChanges()

60

Else

61	ModelState.AddModelError("upfile", "資料庫檔案資訊未刪除！")

62	Return View()

63

End If

64

Else

65	ModelState.AddModelError("upfile", "檔案已存在！")

66	Return View()

67

End If

68

End If

69

End If

70

End Using

71

72	Return RedirectToAction("Index")

73	End Function

我們在專案目鍵下建立一個 Files 目錄，用來儲存上傳的檔案。這裡要注意傳入參數的前後順序，Upload.aspx 的表單順序，如果上傳檔案欄位第一個，那麼 upfile As HttpPostedFileBase 就要在第一個，反之亦然。

Upload.aspx

view sourceprint?

01	<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

02

03	<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

04	Upload One File

05	</asp:Content>

06

07	<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

08

09	<h2>Upload One File</h2>

10

11	<%Using Html.BeginForm("Upload", "file", FormMethod.Post, New With {.enctype = "multipart/form-data"})%>

12	<%: Html.ValidationSummary(True)%>

13	File：<input id="upfile" name="upfile" type="file" value="" />

14	<%: Html.ValidationMessage("upfile")%>

15

16

17	PostDate：<%: Html.TextBox("PostDate")%>

18	<%: Html.ValidationMessage("PostDate")%>

19

20

21	Version：<%: Html.TextBox("FileVersion")%>

22	<%: Html.ValidationMessage("FileVersion")%>

23

24

25	<input type="submit" value="Upload" />

26	<%End Using%>

27

28	</asp:Content>

MVC 多檔案上傳

接下來我們來看多檔案上傳。

view sourceprint?

01	''' <summary>

02	''' MVC 多檔案同時上傳

03	''' </summary>

04	''' <param name="form">表單資料</param>

05	<HttpPost()>

06	Function MultiUpload(form As FormCollection) As ActionResult

07	' 資料檢查，請自行設計

08

09	Dim Msg As String = String.Empty

10	For i As Integer = 0 To Request.Files.Count - 1

11	Msg += Request.Files(i).FileName & " 上傳成功！

12

"

13	Request.Files(i).SaveAs(Server.MapPath("~/Files/") & Request.Files(i).FileName)

14

Next

15

16	ViewBag.Msg = MvcHtmlString.Create(Msg)

17

18	Return View()

19	End Function

這裡讓我偷懶一下，檔案的檢查與資訊新增至資料庫都和Upload差不多，讓你動點手。

view sourceprint?

01	<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

02

03	<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

04	Upload Multi-Files

05	</asp:Content>

06

07	<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

08

09	<h2>Upload Multi-Files</h2>

10	<%: Html.ActionLink("Go back Index","Index") %>

11	<% Using (Html.BeginForm("MultiUpload", "File", FormMethod.Post, New With {.enctype = "multipart/form-data"}))%>

12	<div class="uploadfiles">

13

<p>

14	<input type="file" name="files" />

15

</p>

16

</div>

17

<p>

18	<a href="#add" id="additem">Add Upload File</a>

19

20

21

22	<input type="submit" value="Upload" />

23

</p>

24	<% End Using%>

25

26	<%: ViewBag.Msg %>

27	<script type="text/javascript">

28	$('#additem').live('click', function () {

29	$('.uploadfiles').append($("<p><input type='file' name='files' /></p>"));

30

});

31

</script>

32	</asp:Content>

重點在列下方那一段 jQeruy，讓我們重態新增要上傳資料的欄位。

MVC 檔案下載

最後的Download程式。

view sourceprint?

01	Function Download(id As Integer) As ActionResult

02	Using db As New FilesEntities

03

04

' 取得檔案資訊

05	Dim getfile = (From f In db.FileDown

06	Where f.FileId = id

07	Select f).FirstOrDefault()

08

09	If getfile.FileName IsNot Nothing Then

10	Dim FilePath As String = Server.MapPath("~/Files/" & getfile.FileName)

11

12

' 進行下載

13	If System.IO.File.Exists(FilePath) Then

14	Return File(FilePath, getfile.FileType, getfile.FileName)

15

End If

16

Else

17

' 回應錯誤

18	Return Content("<span style='color:red'>無法下載檔案！</span>")

19

End If

20

End Using

21

22	Return RedirectToAction("Index")

23	End Function

我們資料表設計裡有Guid，你也可以設計一個使用Guid來讓使用者下載的方法，這樣使用者就無法使用1,2,3,4這樣的好猜的數字來下載資料。

MVC 檔案刪除

又想偷懶了，程式給你寫。

1. 傳入id從資料庫找到檔案名稱。
2. 使用Path.Combine與Server.MapPath()組合出完整路徑。
3. 使用File.Exists(路徑)判斷檔案是否存在。
4. 存在，刪除檔案及資料庫資訊。( File.Delete(路徑) )

這樣一個可上傳、下載、刪除的簡易檔案管理程式就完成了。

參考資料

1. ASP.NET MVC 檔案上傳下載是很方便的 
2. ASP.NET MVC的檔案上傳與下載 
3. ASP.NET MVC FileUpload 檔案上傳