首页 > 代码库 > 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: @:None14: }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 图片的上传及显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。