首页 > 代码库 > MVC 4 图片的上传及显示

MVC 4 图片的上传及显示

首先我们看一下如何上传:

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方法的参数
 
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字段存的图片路径一定要带上“~”。
 
现在我们来看下如何显示:
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="http://www.mamicode.com/@Url.Content(Model.Pictures)" alt="images" />
 18:                 }
 19:             </div>
 20:         </div>
 21: }
这里需要注意的是src的地方,不能直接写上Model.Pictures,前面要加上@Url.Content, 不然显示的是c:/images/123.png, 图片不能正常显示。
 
control:
跟create一样的操作, 此处省略。

MVC 4 图片的上传及显示