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="" height="" 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一样的操作, 此处省略。

MVC 4 图片的上传及显示的更多相关文章

  1. MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传

    前段时间做了几个关于图片.文件上传的Demo,使用客户端Query-File-Upload插件和服务端Badkload组件实现多文件异步上传,比如"MVC文件上传04-使用客户端jQuery ...

  2. django中图片的上传和显示

    上传图片实际上是 把图片存在服务器的硬盘中,将图片存储的路径存在数据库中. 1 首先要配置文件上传的路径: 1.1 建立静态文件目录 在项目根目录下 新建一个 static文件夹,下面再建立一个med ...

  3. Django中图片的上传并显示

    一.settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').replace('\\', ...

  4. Django_图片的上传下载显示配置

    图片上传的配置 image = models.ImageField(upload_to='org/%Y/%m',...) upload_to默认是上传到项目的'MEDIA_ROOT/org/%Y/%m ...

  5. 航空售票系统设计分析(Markdownpad2图片服务器上传无法显示)

    一.体系结构设计 1.系统原型图 2.体系结构环境图 3.构建结构图 二.人机交互界面设计 1.用户分析结果及建议 本次分析的主要目标关注用户评论反馈,对反馈进行归纳,设计出用户喜欢的界面样式.用户的 ...

  6. ruby on rails爬坑(三):图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  7. ASP.NET MVC图片管理(上传,预览与显示)

    先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)I ...

  8. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  9. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

随机推荐

  1. Linux下查找进程id并强制停止进程的脚本

    Linux下的tomcat的停止脚本shutdown.sh经常失败,造成tomcat进程没关闭.所以只能手动查找进程id,然后用kill命令来强制停止.每次都要这样查一下,然后再杀进程.感觉有点麻烦, ...

  2. C#基础巩固(3)-Linq To XML 读取XML

    记录下一些读取XML的方法,以免到用的时候忘记了,还得花时间去找. 一.传统写法读取XML 现在我有一个XML文件如下: 现在我要查找名字为"王五"的这个人的 Id 和sex(性别 ...

  3. Mybatis教程-实战看这一篇就够了

    转自:https://blog.csdn.net/hellozpc/article/details/80878563 1.从JDBC谈起 1.1.使用IDEA创建maven工程 1.2.引入mysql ...

  4. CSS 列表实例

    CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表属性(list)属性 描述list-style 简写属性.用于把所有用于列表的属性设置于一个声明中.list-styl ...

  5. Linux下开源邮件系统Postfix+Extmail+Extman环境部署记录

    一.基础知识梳理MUA (Mail User Agent) MUA 既是"邮件使用者代理人",因为除非你可以直接利用类似 telnet 之类的软件登入邮件主机来主动发出信件,否则您 ...

  6. Linux下rsyslog日志收集服务环境部署记录

    rsyslog 可以理解为多线程增强版的syslog. 在syslog的基础上扩展了很多其他功能,如数据库支持(MySQL.PostgreSQL.Oracle等).日志内容筛选.定义日志格式模板等.目 ...

  7. Today

    I'm facing the major enemy. The information. I don't know when I've been crazy about seeking informa ...

  8. M2阶段事后总结

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述?我们的主要任务是将35w+个符合条件的网页,问答,文章放入数据库:爬取功能定义为以下几种:通用型爬取 ...

  9. <编写有效用例>读书笔记3

    <编写有效用例>读书笔记3 第三部分主要内容是对忙于编写用例的人的提示第20章:对每个用例的提示1.每个用例都是一篇散文:这个提示提醒我们将注意力集中与文字而不是图画上,同时帮助了解将要遇 ...

  10. 实训十二(stick的设定)

    上篇我们介绍到人物主角的设定,其实人物是有工具使的,那就是——stick小棍. 信息的获取.起始位置.长度的加载.边界的判断.位置.长度重置是需要我们主要考虑的问题 信息获取上考虑的使什么时候加载st ...