最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来。

十年河东十年河西,莫欺少年穷

学无止境,精益求精

   最近在做自学MVC,遇到的问题很多,索性一点点总结下。

本篇旨在写一篇上传文件的博客,上传文件中以上传图片最多,所以本篇以上传图片为例进行说明:

在进行讲解之前,先声明如下几点:

1、本篇是结合Jquery进行图片上传,需要用到JQ库:jquery-1.7.2.js 和 jquery.MultiFile.js

2、本篇用HTML5中FileReader进行图片的展示,无需上传就可以展示选择的图片,具体大家可自行查阅:HTML5+JQuery+FileReader

3、本篇分为单文件上传及多文件上传

效果图如下:

以上是效果图

下面分别以前端HTML和后端代码进行说明:

前端JS如下:

以上便是通过FileReader读取图片并展示的代码

下面就HTML进行说明如下:

Form必须加上Enctype类型、id="mainPicNum"的Input控件type为File,即:上传控件,accept="gif|jpg|jpeg|png|bmp|pic"为该上传控件接收的文件类型,maxlength="1"为允许上传的最大文件数,如上效果图中,商品配图和商品详情图MaxLength均大于1,如下所示:

完整HTML代码如下:

  1. @{
  2. ViewBag.Title = "FileUpLoad";
  3.  
  4. }
  5. @section css{
  6. <script type="text/javascript">

<script src="~/Scripts/jquery-1.7.2.js"></script>
        <script src="~/Scripts/jquery.MultiFile.js"></script>

  1. $(function () {
  2. var result = document.getElementById("result");
  3. var input = document.getElementById("mainPicNum");
  4.  
  5. if (typeof FileReader === 'undefined') {
  6. result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器!";
  7. input.setAttribute('disabled', 'disabled');
  8. }
  9.  
  10. $("#mainPicNum").MultiFile({
  11. afterFileSelect: function (element, value, master_element) {
  12. readFile.call(element);
  13. },
  14. afterFileRemove: function (element, value, master_element) {
  15. $('img').each(function () {
  16. if ($(this).data('src') && (element.files[].name == $(this).data('src'))) {
  17. $(this).remove();
  18. }
  19. });
  20. }
  21. });
  22.  
  23. function readFile() {
  24. var file = this.files[];
  25. if (!/image\/\w+/.test(file.type)) {
  26. alert("文件必须为图片!");
  27. return false;
  28. }
  29. var reader = new FileReader();
  30. reader.readAsDataURL(file);
  31. reader.onload = function (e) {
  32. result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>';
  33. }
  34. }
  35. });
  36.  
  37. $(function () {
  38. var result = document.getElementById("PicNumresult");
  39. var input = document.getElementById("PicNum");
  40.  
  41. if (typeof FileReader === 'undefined') {
  42. result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器";
  43. input.setAttribute('disabled', 'disabled');
  44. }
  45.  
  46. $("#PicNum").MultiFile({
  47. afterFileSelect: function (element, value, master_element) {
  48. readFile.call(element);
  49. },
  50. afterFileRemove: function (element, value, master_element) {
  51. $('img').each(function () {
  52. if ($(this).data('src') && (element.files[].name == $(this).data('src'))) {
  53. $(this).remove();
  54. }
  55. });
  56. }
  57. });
  58.  
  59. function readFile() {
  60. var file = this.files[];
  61. if (!/image\/\w+/.test(file.type)) {
  62. alert("文件必须为图片!");
  63. return false;
  64. }
  65. var reader = new FileReader();
  66. reader.readAsDataURL(file);
  67. reader.onload = function (e) {
  68. result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>';
  69. }
  70. }
  71. });
  72.  
  73. $(function () {
  74. var result = document.getElementById("DescriblePicNumresult");
  75. var input = document.getElementById("DescriblePicNum");
  76.  
  77. if (typeof FileReader === 'undefined') {
  78. result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器";
  79. input.setAttribute('disabled', 'disabled');
  80. }
  81.  
  82. $("#DescriblePicNum").MultiFile({
  83. afterFileSelect: function (element, value, master_element) {
  84. readFile.call(element);
  85. },
  86. afterFileRemove: function (element, value, master_element) {
  87. $('img').each(function () {
  88. if ($(this).data('src') && (element.files[].name == $(this).data('src'))) {
  89. $(this).remove();
  90. }
  91. });
  92. }
  93. });
  94.  
  95. function readFile() {
  96. var file = this.files[];
  97. if (!/image\/\w+/.test(file.type)) {
  98. alert("文件必须为图片!");
  99. return false;
  100. }
  101. var reader = new FileReader();
  102. reader.readAsDataURL(file);
  103. reader.onload = function (e) {
  104. result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>';
  105. }
  106. }
  107. });
  108.  
  109. </script>
  110. }
  111. <form id="form1" action="FileUpLoad" method="post" enctype="multipart/form-data">
  112. <div style=" height:25px;"></div>
  113. <table>
  114. <tr>
  115. <td>
  116. <span class="spans">商品主图:</span>
  117. </td>
  118. <td>
  119. <input id="mainPicNum" name="mainPicNum" type="file" class=""
  120. accept="gif|jpg|jpeg|png|bmp|pic" maxlength="" />
  121. </td>
  122. </tr>
  123. <tr style="height: 8px;">
  124. <td></td>
  125. <td></td>
  126. </tr>
  127. <tr>
  128. <td>
  129. <span class="spans">主图显示区:</span>
  130. </td>
  131. <td>
  132. <div id="result">
  133. </div>
  134. </td>
  135. </tr>
  136. <tr style="height: 8px;">
  137. <td></td>
  138. <td></td>
  139. </tr>
  140. <tr>
  141. <td>
  142. <span class="spans">商品配图:</span>
  143. </td>
  144. <td>
  145. <input id="PicNum" name="PicNum" type="file" runat="server" class="" accept="gif|jpg|jpeg|png|bmp|pic"
  146. maxlength="" />
  147. </td>
  148. </tr>
  149.  
  150. <tr style="height:8px;">
  151. <td>
  152.  
  153. </td>
  154. <td>
  155.  
  156. </td>
  157. </tr>
  158. <tr>
  159. <td>
  160. <span class="spans">配图显示区:</span>
  161. </td>
  162. <td>
  163. <div id="PicNumresult">
  164. </div>
  165. </td>
  166. </tr>
  167. <tr style="height:8px;">
  168. <td>
  169.  
  170. </td>
  171. <td>
  172.  
  173. </td>
  174. </tr>
  175.  
  176. <tr>
  177. <td>
  178. <span class="spans">商品详情图:</span>
  179. </td>
  180. <td>
  181. <input id="DescriblePicNum" name="DescriblePicNum" type="file" runat="server" class=""
  182. accept="gif|jpg|jpeg|png|bmp|pic" maxlength="" />
  183. </td>
  184. </tr>
  185.  
  186. <tr style="height:8px;">
  187. <td>
  188.  
  189. </td>
  190. <td>
  191.  
  192. </td>
  193. </tr>
  194. <tr>
  195. <td>
  196. <span class="spans">详情图显示区:</span>
  197. </td>
  198. <td>
  199. <div id="DescriblePicNumresult">
  200. </div>
  201. </td>
  202. </tr>
  203. </table>
  204. <div style=" height:25px;"></div>
  205. <input id="Submit1" type="submit" value="submit" />
  206. </form>

前端代码及说明就这么多,下面我们来书写后端代码:

首先截图讲解:如下

红线标注部分均是后端注意事项,代码注释很完善,大家自行查看,不作说明:

后端代码整体如下:

  1. /// <summary>
  2. /// 各个空间单个文件上传
  3. /// </summary>
  4. /// <param name="mainPicNum">与前台HTML file控件Name对应</param>
  5. /// <param name="PicNum">与前台HTML file控件Name对应</param>
  6. /// <param name="DescriblePicNum">与前台HTML file控件Name对应</param>
  7. /// <returns></returns>
  8. [HttpPost]
  9. public ActionResult FileUpLoad(HttpPostedFileBase mainPicNum, HttpPostedFileBase PicNum, HttpPostedFileBase DescriblePicNum)
  10. {
  11. string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + mainPicNum.FileName;
  12. string pth = Server.MapPath("~/UpLoad/") + fileName;
  13. mainPicNum.SaveAs(pth);
  14. //
  15. fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + PicNum.FileName;
  16. pth = Server.MapPath("~/UpLoad/") + fileName;
  17. PicNum.SaveAs(pth);
  18. //
  19. fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + DescriblePicNum.FileName;
  20. pth = Server.MapPath("~/UpLoad/") + fileName;
  21. DescriblePicNum.SaveAs(pth);
  22. return View();
  23. }
  24.  
  25. /// <summary>
  26. /// MVC4 上传文件
  27. /// </summary>
  28. /// <param name="mainPicNum">与前台HTML file控件Name对应</param>
  29. /// <param name="PicNum">与前台HTML file控件Name对应</param>
  30. /// <param name="DescriblePicNum">与前台HTML file控件Name对应</param>
  31. /// <returns></returns>
  32. [HttpPost]
  33. public ActionResult FileUpLoad(IEnumerable<HttpPostedFileBase> mainPicNum, IEnumerable<HttpPostedFileBase> PicNum, IEnumerable<HttpPostedFileBase> DescriblePicNum)
  34. {
  35. string commonPath = Server.MapPath("~/UpLoad/");//保存路径
  36.  
  37. foreach (var file in mainPicNum)
  38. {
  39.  
  40. string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性
  41. int filesize = file.ContentLength;//上传文件的字节数
  42. string fileType = file.ContentType;//上传文件的类型
  43. fileType = fileType.Substring(, fileType.Length - );
  44. string fileTypes = "gif|jpg|jpeg|png|bmp|pic";
  45. if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型
  46. {
  47. if (filesize <= * * )//要求上传的图片小于2M
  48. {
  49. string NewcommonPath = commonPath + fileName;
  50. file.SaveAs(NewcommonPath);
  51. }
  52. }
  53. }
  54. //
  55. foreach (var file in PicNum)
  56. {
  57.  
  58. string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性
  59. int filesize = file.ContentLength;//上传文件的字节数
  60. string fileType = file.ContentType;//上传文件的类型
  61. fileType = fileType.Substring(, fileType.Length - );
  62. string fileTypes = "gif|jpg|jpeg|png|bmp|pic";
  63. if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型
  64. {
  65. if (filesize <= * * )//要求上传的图片小于2M
  66. {
  67. string NewcommonPath = commonPath + fileName;
  68. file.SaveAs(NewcommonPath);
  69. }
  70. }
  71. }
  72. //
  73. foreach (var file in DescriblePicNum)
  74. {
  75.  
  76. string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性
  77. int filesize = file.ContentLength;//上传文件的字节数
  78. string fileType = file.ContentType;//上传文件的类型
  79. fileType = fileType.Substring(, fileType.Length - );
  80. string fileTypes = "gif|jpg|jpeg|png|bmp|pic";
  81. if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型
  82. {
  83. if (filesize <= * * )//要求上传的图片小于2M
  84. {
  85. string NewcommonPath = commonPath + fileName;
  86. file.SaveAs(NewcommonPath);
  87. }
  88. }
  89. }
  90. return View();
  91. }

好了,这就是本篇上传图片的完整源码,无非需要用到一个Jquery库和多文件上传JS,上文也给出了对应的名称,大家可自行网上下载,也可以通过我上传的链接下载:

看完就顶哈!

资源文件:JS库和多文件上传JS文件,请使用此链接下载!http://files.cnblogs.com/files/chenwolong/Desktop.zip

@陈卧龙的博客

MVC 上传文件并展示的更多相关文章

  1. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

  2. MVC上传文件

    ASP.NET MVC上传文件是必段撑握的知识.加强训练才是.以前Insus.NET曾使用第三方MyAjaxForm.js :http://www.cnblogs.com/insus/p/378548 ...

  3. Spring MVC 上传文件

    Spring MVC上传文件需要如下步骤: 1.前台页面,form属性 method设置为post,enctype="multipart/form-data"  input的typ ...

  4. asp.net MVC 上传文件 System.Web.HttpException: 超过了最大请求长度

    APS.NET MVC 上传文件出现  System.Web.HttpException: 超过了最大请求长度 这个问题 原因是 默认最大上传文件大小为4096,而我提交的文件太大了. 解决方案:修改 ...

  5. Spring MVC上传文件原理和resolveLazily说明

    问题:使用Spring MVC上传大文件,发现从页面提交,到进入后台controller,时间很长.怀疑是文件上传完成后,才进入.由于在HTTP首部自定义了“Token”字段用于权限校验,Token的 ...

  6. MVC:上传文件

    今天写了一个使用MVC上传的DEMO,很简单不超过10行代码.代码如下(关注重点,所以尽量精简掉其他代码): 项目结构

  7. ASP.NET MVC上传文件----uploadify的使用

    课程设计需要实现上传文件模块,本来ASP.NET是有内置的控件,但是ASP.NET MVC没有,所以就有两种方法:自定义和采用第三方插件.由于时间的关系,故采用第三方插件:uploadify. upl ...

  8. ASP.NET MVC上传文件

    最近参考网络资料,学习了ASP.NET MVC如何上传文件.最基本的,没有用jQuery等技术. 1.定义Model public class TestModel    {        [Displ ...

  9. 解析Spring MVC上传文件

    新建一个普通的maven工程 在pom.xml文件中引入相应的坐标 <?xml version="1.0" encoding="UTF-8"?> & ...

随机推荐

  1. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [4] 首页 APP 接口开发方案 ③ 定时读取缓存方式

    用于 linux 执行 crontab 命令生成缓存的文件 crop.php <?php //让crontab 定时执行的脚本程序 require_once 'db.php'; require_ ...

  2. [SHELL进阶] (转)最牛B的 Linux Shell 命令 (二)

    1.用你最喜欢的编辑器来敲命令 command <CTRL-x CTRL-e> 在已经敲完的命令后按 <CTRL-x CTRL-e> ,会打开一个你指定的编辑器(比如vim,通 ...

  3. ecshop 完美解决动态ip登录超时和购物车清空问题

    ecshop 完美解决动态ip登录超时和购物车清空问题 ECSHOP模板/ecshop开发中心(www.68ecshop.com) / 2014-05-06 前一段时间,ECSHOP开发中心的一个客户 ...

  4. BAT批处理(一)

    本文摘自博文<BAT批处理文件教程> 这是一篇技术教程,我会用很简单的文字表达清楚自己的意思,只要你识字就能看懂,就能学到知识.写这篇教程的目的,是让每一个看过这些文字的朋友记住一句话:如 ...

  5. LR脚本技巧

    1.参数化空值       如上图所示,当参数化时某个值需要为空值(非空格),直接在参数化文件中空一行/格即可,虽然Parameter List界面上没有显示空的那一行,但并不影响取值. 2.手工日志 ...

  6. 图解SQL多表关联查询

      图解SQL多表关联查询     网上看了篇文章关于多表连接的,感觉很好,记录下来,以便日后自己学习  内连接     左连接     右连接       全外连接   1. 查两表关联列相等的数据 ...

  7. UIView 的粗浅解析

    The UIView class defines a rectangular area on the screen and the interfaces for managing the conten ...

  8. http相关概念在iOS中的使用介绍

    http://www.cocoachina.com/ios/20160329/15773.html

  9. Vmware安装与VMware下Linux系统安装

    源文件地址:http://www.cnblogs.com/lclq/p/5619271.html 1.下载安装VMware,我安装的是VMware 12.VMware从11开始不再支持32位系统,32 ...

  10. ubuntu下的jdk安装

    软件环境: 虚拟机:VMware Workstation 10 操作系统:ubuntu-12.04-desktop-amd64 JAVA版本:jdk-7u55-linux-x64 软件下载地址: JD ...