MVC 4 图片的上传及显示

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

1.1view

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

2:{

3:<divclass="editor-label">

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

5:</div>

6:<divclass="editor-field">

7:<div><inputtype="file"name="Image"/></div>

8:</div>

9:｝

这里需要注意的是BeginForm方法的参数

1.2control

1:publicActionResultCreate(Achivementachieve,HttpPostedFileBaseimage)

2:{

3:try

4:{

5:

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

7:{

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

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

10:image.SaveAs(filePath);

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

12:}

13:m_achivementService.Create(achieve);

14:returnRedirectToAction("Index");

15:}

16:catch

17:{

18:returnView();

19:}

20:}

现在图片已上传到Images目录下，注意这里Pictures字段存的图片路径一定要带上“～”。

2现在我们来看下如何显示

2.1view

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

2:{

3:<divclass="editor-label">

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

5:</div>

6:<divclass="editor-field">

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

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

9:<div><inputtype="file"name="Image"/></div>

10:<div>

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

12:{

13:@:None

14:}

15:else

16:{

17:<imgwidth="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.2control

跟create一样的操作，此处省略。