最近悟出来一个道理，在这儿分享给大家：学历代表你的过去，能力代表你的现在，学习代表你的将来。
十年河东十年河西，莫欺少年穷
学无止境，精益求精
最近在做自学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代码如下：
@{ ViewBag.Title = "FileUpLoad"; } @section css{ <script type="text/javascript">
<script src="~/Scripts/jquery-1.7.2.js"></script>
<script src="~/Scripts/jquery.MultiFile.js"></script>
$(function () { var result = document.getElementById("result"); var input = document.getElementById("mainPicNum"); if (typeof FileReader === 'undefined') { result.innerHTML = "抱歉，你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器！"; input.setAttribute('disabled', 'disabled'); } $("#mainPicNum").MultiFile({ afterFileSelect: function (element, value, master_element) { readFile.call(element); }, afterFileRemove: function (element, value, master_element) { $('img').each(function () { if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) { $(this).remove(); } }); } }); function readFile() { var file = this.files[0]; if (!/image\/\w+/.test(file.type)) { alert("文件必须为图片！"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>'; } } }); $(function () { var result = document.getElementById("PicNumresult"); var input = document.getElementById("PicNum"); if (typeof FileReader === 'undefined') { result.innerHTML = "抱歉，你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器"; input.setAttribute('disabled', 'disabled'); } $("#PicNum").MultiFile({ afterFileSelect: function (element, value, master_element) { readFile.call(element); }, afterFileRemove: function (element, value, master_element) { $('img').each(function () { if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) { $(this).remove(); } }); } }); function readFile() { var file = this.files[0]; if (!/image\/\w+/.test(file.type)) { alert("文件必须为图片！"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>'; } } }); $(function () { var result = document.getElementById("DescriblePicNumresult"); var input = document.getElementById("DescriblePicNum"); if (typeof FileReader === 'undefined') { result.innerHTML = "抱歉，你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器"; input.setAttribute('disabled', 'disabled'); } $("#DescriblePicNum").MultiFile({ afterFileSelect: function (element, value, master_element) { readFile.call(element); }, afterFileRemove: function (element, value, master_element) { $('img').each(function () { if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) { $(this).remove(); } }); } }); function readFile() { var file = this.files[0]; if (!/image\/\w+/.test(file.type)) { alert("文件必须为图片！"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" style=" height:100px; width:100px;"/>'; } } }); </script> } <form id="form1" action="FileUpLoad" method="post" enctype="multipart/form-data"> <div style=" height:25px;"></div> <table> <tr> <td> <span class="spans">商品主图：</span> </td> <td> <input id="mainPicNum" name="mainPicNum" type="file" class="" accept="gif|jpg|jpeg|png|bmp|pic" maxlength="1" /> </td> </tr> <tr style="height: 8px;"> <td></td> <td></td> </tr> <tr> <td> <span class="spans">主图显示区：</span> </td> <td> <div id="result"> </div> </td> </tr> <tr style="height: 8px;"> <td></td> <td></td> </tr> <tr> <td> <span class="spans">商品配图：</span> </td> <td> <input id="PicNum" name="PicNum" type="file" runat="server" class="" accept="gif|jpg|jpeg|png|bmp|pic" maxlength="5" /> </td> </tr> <tr style="height:8px;"> <td> </td> <td> </td> </tr> <tr> <td> <span class="spans">配图显示区：</span> </td> <td> <div id="PicNumresult"> </div> </td> </tr> <tr style="height:8px;"> <td> </td> <td> </td> </tr> <tr> <td> <span class="spans">商品详情图：</span> </td> <td> <input id="DescriblePicNum" name="DescriblePicNum" type="file" runat="server" class="" accept="gif|jpg|jpeg|png|bmp|pic" maxlength="5" /> </td> </tr> <tr style="height:8px;"> <td> </td> <td> </td> </tr> <tr> <td> <span class="spans">详情图显示区：</span> </td> <td> <div id="DescriblePicNumresult"> </div> </td> </tr> </table> <div style=" height:25px;"></div> <input id="Submit1" type="submit" value="submit" /> </form>
前端代码及说明就这么多，下面我们来书写后端代码：
首先截图讲解：如下
红线标注部分均是后端注意事项，代码注释很完善，大家自行查看，不作说明：
后端代码整体如下：
/// <summary> /// 各个空间单个文件上传 /// </summary> /// <param name="mainPicNum">与前台HTML file控件Name对应</param> /// <param name="PicNum">与前台HTML file控件Name对应</param> /// <param name="DescriblePicNum">与前台HTML file控件Name对应</param> /// <returns></returns> [HttpPost] public ActionResult FileUpLoad(HttpPostedFileBase mainPicNum, HttpPostedFileBase PicNum, HttpPostedFileBase DescriblePicNum) { string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + mainPicNum.FileName; string pth = Server.MapPath("~/UpLoad/") + fileName; mainPicNum.SaveAs(pth); // fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + PicNum.FileName; pth = Server.MapPath("~/UpLoad/") + fileName; PicNum.SaveAs(pth); // fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + DescriblePicNum.FileName; pth = Server.MapPath("~/UpLoad/") + fileName; DescriblePicNum.SaveAs(pth); return View(); } /// <summary> /// MVC4 上传文件 /// </summary> /// <param name="mainPicNum">与前台HTML file控件Name对应</param> /// <param name="PicNum">与前台HTML file控件Name对应</param> /// <param name="DescriblePicNum">与前台HTML file控件Name对应</param> /// <returns></returns> [HttpPost] public ActionResult FileUpLoad(IEnumerable<HttpPostedFileBase> mainPicNum, IEnumerable<HttpPostedFileBase> PicNum, IEnumerable<HttpPostedFileBase> DescriblePicNum) { string commonPath = Server.MapPath("~/UpLoad/");//保存路径 foreach (var file in mainPicNum) { string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性 int filesize = file.ContentLength;//上传文件的字节数 string fileType = file.ContentType;//上传文件的类型 fileType = fileType.Substring(6, fileType.Length - 6); string fileTypes = "gif|jpg|jpeg|png|bmp|pic"; if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型 { if (filesize <= 2 * 1024 * 1024)//要求上传的图片小于2M { string NewcommonPath = commonPath + fileName; file.SaveAs(NewcommonPath); } } } // foreach (var file in PicNum) { string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性 int filesize = file.ContentLength;//上传文件的字节数 string fileType = file.ContentType;//上传文件的类型 fileType = fileType.Substring(6, fileType.Length - 6); string fileTypes = "gif|jpg|jpeg|png|bmp|pic"; if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型 { if (filesize <= 2 * 1024 * 1024)//要求上传的图片小于2M { string NewcommonPath = commonPath + fileName; file.SaveAs(NewcommonPath); } } } // foreach (var file in DescriblePicNum) { string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性 int filesize = file.ContentLength;//上传文件的字节数 string fileType = file.ContentType;//上传文件的类型 fileType = fileType.Substring(6, fileType.Length - 6); string fileTypes = "gif|jpg|jpeg|png|bmp|pic"; if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型 { if (filesize <= 2 * 1024 * 1024)//要求上传的图片小于2M { string NewcommonPath = commonPath + fileName; file.SaveAs(NewcommonPath); } } } return View(); }
好了，这就是本篇上传图片的完整源码，无非需要用到一个Jquery库和多文件上传JS，上文也给出了对应的名称，大家可自行网上下载，也可以通过我上传的链接下载：
看完就顶哈！
资源文件：JS库和多文件上传ＪＳ文件，请使用此链接下载！http://files.cnblogs.com/files/chenwolong/Desktop.zip
@陈卧龙的博客
