（11）通过表单上传文件

问题

你希望允许用户在你的网站上传并保存文件。

解决方案

通过HttpPostedFileBase.实现上传文件和保存到磁盘。

讨论

在接下来的例子里，之前创建的去添加和更新图书的View将被更新成允许用户选择一个文件并且上传缩略图文件。作为开始，Book/Create  view 应该被更新，改变From的编码类型并且为缩略图字段替换掉脚手架 textbox。代码如下：

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

@model MvcApplication.Models.Book @{     ViewBag.Title = "Create"; } <h2>     Create</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src=" @Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm("Create", "Books", FormMethod.Post, new { enctype = "multipart/form-data" })) {     @Html.ValidationSummary(true)     <fieldset>         <legend>Book</legend>         <div class="editor-label">             @Html.LabelFor(model => model.Title)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Title)             @Html.ValidationMessageFor(model => model.Title)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Isbn)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Isbn)             @Html.ValidationMessageFor(model => model.Isbn)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Summary)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Summary)             @Html.ValidationMessageFor(model => model.Summary)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Author)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Author)             @Html.ValidationMessageFor(model => model.Author)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Thumbnail)         </div>         <div class="editor-field">             <input type="file" name="file" />             @Html.ValidationMessageFor(model => model.Thumbnail)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Price)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Price)             @Html.ValidationMessageFor(model => model.Price)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Published)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Published)             @Html.ValidationMessageFor(model => model.Published)         </div>         <p>             <input type="submit" value="Create" />         </p>     </fieldset> } <div>     @Html.ActionLink("Back to List", "Index") </div>

 

Book/Edit view 也应该以相同的方式被更新，除了添加一个hidden字段（在旧的thumbnail那）。这将用于在BookController中上传新文件之前删除旧的文件。代码如下：

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

@model MvcApplication.Models.Book @{     ViewBag.Title = "Edit"; } <h2>     Edit</h2> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src=" @Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> @using (Html.BeginForm("Edit", "Books", FormMethod.Post, new { enctype = "multipart/form-data" })) {     @Html.ValidationSummary(true)     <fieldset>         <legend>Book</legend>         @Html.HiddenFor(model => model.ID)         <div class="editor-label">             @Html.LabelFor(model => model.Title)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Title)             @Html.ValidationMessageFor(model => model.Title)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Isbn)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Isbn)             @Html.ValidationMessageFor(model => model.Isbn)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Summary)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Summary)             @Html.ValidationMessageFor(model => model.Summary)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Author)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Author)             @Html.ValidationMessageFor(model => model.Author)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Thumbnail)         </div>         <div class="editor-field">             <input type="file" name="file" />             @Html.HiddenFor(model => model.Thumbnail)             @Html.ValidationMessageFor(model => model.Thumbnail)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Price)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Price)             @Html.ValidationMessageFor(model => model.Price)         </div>         <div class="editor-label">             @Html.LabelFor(model => model.Published)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.Published)             @Html.ValidationMessageFor(model => model.Published)         </div>         <p>             <input type="submit" value="Save" />         </p>     </fieldset> } <div>     @Html.ActionLink("Back to List", "Index") </div>

 

由于BooksController中Create和edit功能都是保存上传文件，为了避免重复代码，我们将创建一个新的类。这个类将被创建在Utils文件夹中。Utils文件夹->右击并选择添加→类。这类命名为FileUpload.cs。这个新的类将负责两个关键功能：保存文件，并删除该文件。在下面的例子中，FileUpload类接收一个HttpPostedFile相应的变量，并将它保存到Web服务器上的特定点。另一个功能呢，相反，它接收到的文件的名称，并从Web服务器删除它。