MVC 4 圖片的上傳及顯示

1 首先咱們看一下如何上傳

1.1 view

 

上傳頁面：

  1: @using (Html.BeginForm("Create", "Achievement", FormMethod.Post, new { enctype = "multipart/form-data" }))

  2: {

  3:      <div class="editor-label">

  4:             @Html.LabelFor(model => model.Pictures)

  5:         </div>

  6:         <div class="editor-field">

  7:             <div><input type="file" name="Image" /></div>

  8:         </div>

  9: ｝

這裏須要注意的是BeginForm方法的參數

1.2 control

  1:  public ActionResult Create(Achivement achieve, HttpPostedFileBase image)

  2:         {

  3:             try

  4:             {

  5:                 

  6:                 if (image != null && image.ContentLength > 0)

  7:                 {

  8:                     string fileName = DateTime.Now.ToString("yyyyMMdd") + "-" + Path.GetFileName(image.FileName);

  9:                     string filePath = Path.Combine(Server.MapPath("~/Images"), fileName);

 10:                     image.SaveAs(filePath);

 11:                     achieve.Pictures = "~/Images/" + fileName ; 

 12:                 }

 13:                 m_achivementService.Create(achieve);

 14:                 return RedirectToAction("Index");

 15:             }

 16:             catch

 17:             {

 18:                 return View();

 19:             }

 20:         }

如今圖片已上傳到Images目錄下，注意這裏Pictures字段存的圖片路徑必定要帶上「～」。

2 如今咱們來看下如何顯示

2.1 view

  1: @using (Html.BeginForm("Edit", "Achievement", FormMethod.Post, new { enctype = "multipart/form-data" }))

  2: {

  3:    <div class="editor-label">

  4:             @Html.LabelFor(model => model.Pictures)

  5:         </div>

  6:         <div class="editor-field">

  7:             @*@Html.EditorFor(model => model.Pictures)

  8:             @Html.ValidationMessageFor(model => model.Pictures)*@

  9:             <div><input type="file" name="Image" /></div>

 10:             <div>

 11:                 @if (string.IsNullOrEmpty(Model.Pictures))

 12:                 {

 13:                     @:None

 14:                 }

 15:                 else

 16:                 {

 17:                       <img width="150" height="150" src="@Url.Content(Model.Pictures)" alt="images" />

 18:                 }

 19:             </div>

 20:         </div>

 21: ｝

這裏須要注意的是src的地方，不能直接寫上Model.Pictures,前面要加上@Url.Content, 否則顯示的是c:/images/123.png, 圖片不能正常顯示。

2.2  control

跟create同樣的操做， 此處省略。