</h1>
<div class="clear"></div>
<div class="postBody">
前言
这一节我们来讲讲在MVC中如何进行文件的上传，我们逐步深入，一起来看看。
Upload File（一）
我们在默认创建的项目中的Home控制器下添加如下：
public ActionResult UploadFile()
{
return View();
}
[HttpPost]
</span><span style="color: #0000ff;">public</span><span style="color: #000000;"> ActionResult UploadFile(HttpPostedFileBase file)
{
</span><span style="color: #0000ff;">var</span> fileName =<span style="color: #000000;"> file.FileName;
</span><span style="color: #0000ff;">var</span> filePath = Server.MapPath(<span style="color: #0000ff;">string</span>.Format(<span style="color: #800000;">"</span><span style="color: #800000;">~/{0}</span><span style="color: #800000;">"</span>, <span style="color: #800000;">"</span><span style="color: #800000;">File</span><span style="color: #800000;">"</span><span style="color: #000000;">));
file.SaveAs(Path.Combine(filePath, fileName));
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> View();
}</span></pre>
在 UploadFile 视图中添加上如下：
<form action="/Home/UploadFile" method="post" enctype="multipart/form-data"> <input type="file" name="file" /><br /> <input type="submit" value="提交" /> </form>
有关视图中我们就不必多说，只需明白如下两点：
（1）在后台利用HttpPostedFileBase来接收上传文件，该类为一个抽象类，但在ASP.NET Web Form却没有此类，此类的出现是为了更好的进行单元测试。
（2）在视图中文件类型的name要和后台接收文件的参数一致。
接下来我们进行演示看看结果：
上述我们简单的上传了一个Excel文件，下面我们通过强类型视图以及模型验证来强化上传。
Upload File（二）
我们创建如下BlogModel类：
public class BlogModel
{
[Display(Name = "博客名称")]
[Required(ErrorMessage = "请输入你的博客名称！")]
public string BlogName { get; set; }
[Display(Name </span>= <span style="color: #800000;">"</span><span style="color: #800000;">博客地址</span><span style="color: #800000;">"</span><span style="color: #000000;">)]
[Required(ErrorMessage </span>= <span style="color: #800000;">"</span><span style="color: #800000;">请输入你的博客地址！</span><span style="color: #800000;">"</span><span style="color: #000000;">)]
</span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">string</span> BlogAddress { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span><span style="color: #000000;">; }
[Display(Name </span>= <span style="color: #800000;">"</span><span style="color: #800000;">博客图片</span><span style="color: #800000;">"</span><span style="color: #000000;">)]
[Required(ErrorMessage </span>= <span style="color: #800000;">"</span><span style="color: #800000;">请上传你的博客图片！</span><span style="color: #800000;">"</span><span style="color: #000000;">)]
<span style="color: #ff0000;"> [ValidateFile]
</span></span><span style="color: #0000ff;">public</span> HttpPostedFileBase BlogPhoto { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span><span style="color: #000000;">; }
}</span></pre>
上述未有验证文件的特性，只能自定义文件特性，如下：
public class ValidateFileAttribute : ValidationAttribute
{
public override bool IsValid(object value)
{
int MaxContentLength = 1024 * 1024 * 4;
string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };
</span><span style="color: #0000ff;">var</span> file = value <span style="color: #0000ff;">as</span><span style="color: #000000;"> HttpPostedFileBase;
</span><span style="color: #0000ff;">if</span> (file == <span style="color: #0000ff;">null</span><span style="color: #000000;">)
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (!AllowedFileExtensions.Contains(file.FileName.Substring(file.FileName.LastIndexOf(<span style="color: #800000;">'</span><span style="color: #800000;">.</span><span style="color: #800000;">'</span><span style="color: #000000;">))))
{
ErrorMessage </span>= <span style="color: #800000;">"</span><span style="color: #800000;">请上传你的博客图片类型: </span><span style="color: #800000;">"</span> + <span style="color: #0000ff;">string</span>.Join(<span style="color: #800000;">"</span><span style="color: #800000;">, </span><span style="color: #800000;">"</span><span style="color: #000000;">, AllowedFileExtensions);
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
}
</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (file.ContentLength ><span style="color: #000000;"> MaxContentLength)
{
ErrorMessage </span>= <span style="color: #800000;">"</span><span style="color: #800000;">上传图片过大，不能超过4兆 : </span><span style="color: #800000;">"</span> + (MaxContentLength / <span style="color: #800080;">1024</span>).ToString() + <span style="color: #800000;">"</span><span style="color: #800000;">MB</span><span style="color: #800000;">"</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
}
</span><span style="color: #0000ff;">else</span>
<span style="color: #0000ff;">return</span> <span style="color: #0000ff;">true</span><span style="color: #000000;">;
}
}</span></pre>
我们可以任意设置上传的文件大小，我们设置为40兆，在配置文件中我们知道 maxRequestLength = 4096 默认是4兆，当然我们可以改变其默认设置。
<httpRuntime targetFramework="4.5" executionTimeout="1100" maxRequestLength="40960" />
此时我们接着在控制器中修改上述上传的方法：
[HttpPost] public ActionResult UploadFile(BlogModel bModel) { if (ModelState.IsValid) { var fileName = bModel.BlogPhoto.FileName; var filePath = Server.MapPath(string.Format("~/{0}", "File")); bModel.BlogPhoto.SaveAs(Path.Combine(filePath, fileName)); ModelState.Clear(); } return View(); }
我们接下来看看效果：
咋回事，出状况了看来是我们的文件过大的原因，看了下该文件有接近45兆，而我们却设置的是40兆，于是乎继续在配置文件中去修改文件大小，但是结果还是一样。我们继续仔细看看该结果的提示，根据提示去找到配置文件下的节点再试试，我们在 syste.webServer 节点下设置为2G：
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="2147483647">
</requestLimits>
</requestFiltering>
</security>
结果就好使了，查了查也有遇到类似问题的人，貌似只有给个结果，却没有给解释，为什么在 httpRuntime 中设置不行，但是有些这样设置是正确的，这是什么原因？最终找到了答案：
（1）在IIS 5和IIS 6中，默认文件上传的最大为4兆，当上传的文件大小超过4兆时，则会得到错误信息，但是我们通过如下来设置文件大小。
<system.web> <httpRuntime maxRequestLength="2147483647" executionTimeout="100000" /> </system.web>
（2）在IIS 7中，默认文件上传的最大为28.6兆，当超过其默认设置大小，同样会得到错误信息，但是我们却可以通过如下来设置文件上传大小。
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="2147483647" />
</requestFiltering>
</security>
</system.webServer>
【类推的话，个人觉得可能是在IIS 7+以上都是通过如上述IIS 7来设置文件上传大小】
虽然我们在服务器端对其进行验证，但是我们觉得这样还是不能保险，我们继续在客户端对其上传的图片类型和大小进行验证。
（1）利用强类型视图给出视图代码：
<style type="text/css">
.field-validation-error {
color: red;
}
</style>
<form id="uploadFileSub" action="/Home/UploadFile" method="post" enctype="multipart/form-data">
<fieldset>
<legend></legend>
<ul class="lifile">
<li>
@Html.LabelFor(m => m.BlogName)<br />
@Html.TextBoxFor(m => m.BlogName, new { maxlength = 50 })
@Html.ValidationMessageFor(m => m.BlogName)
</li>
<li>
@Html.LabelFor(m => m.BlogAddress)<br />
@Html.TextBoxFor(m => m.BlogAddress, new { maxlength = 200 })
@Html.ValidationMessageFor(m => m.BlogAddress)<br />
</li>
<li>
@Html.LabelFor(m => m.BlogPhoto)
@Html.TextBoxFor(m => m.BlogPhoto, new { type = "file" })
@Html.ValidationMessageFor(m => m.BlogPhoto)
<span id="warning" style="color:red;font-size:large;"></span>
</li>
<li>
<input type="submit" value="提交" />
</li>
</ul>
<span style="color: #0000ff;"></</span><span style="color: #800000;">fieldset</span><span style="color: #0000ff;">></span>
</form>
（2）利用脚本获取上传文件大小：
function GetFileSize(fileid) { var fileSize = 0; fileSize = $("#" + fileid)[0].files[0].size; fileSize = fileSize / 1048576; return fileSize; }
（3）根据上传的路径获取文件名称：
function getNameFromPath(strFilepath) {
var objRE = new RegExp(/([^\/\\]+)$/);
var strName = objRE.exec(strFilepath);
</span><span style="color: #0000ff;">if</span> (strName == <span style="color: #0000ff;">null</span><span style="color: #000000;">) {
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">null</span><span style="color: #000000;">;
}
</span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span><span style="color: #0000ff;">return</span> strName[0<span style="color: #000000;">];
}
}</span></pre>
（4）当更换文件时触发Change事件对其文件类型和文件大小进行验证：
$("#BlogPhoto").change(function () {
var file = getNameFromPath($(this).val());
if (file != null) {
var errors = $(document).find(".field-validation-error");
$.each(errors, function (k, v) {
if ($(v).attr("data-valmsg-for") === "BlogPhoto") {
$(v).hide();
}
});
var extension = file.substr((file.lastIndexOf('.') + 1));
switch (extension) {
case 'jpg':
case 'png':
case 'gif':
case 'pdf':
fileTypeBool = false;
break;
default:
fileTypeBool = true;
}
}
if (fileTypeBool) {
$("#warning").html("只能上传扩展名为jpg,png,gif,pdf的文件！");
return false;
}
else {
var size = GetFileSize('BlogPhoto');
if (size > 4) {
fileSizeBool = true;
$("#warning").html("上传文件已经超过4兆！");
} else {
fileSizeBool = false;
}
}
});
（5）当点击提交按钮时对其进行文件进行验证：
$("#uploadFileSub").submit(function () {
$("input[type='text']").each(function (k, v) {
if ($(v).length) {
$(v).siblings("span").hide();
}
});
if (fileTypeBool || fileSizeBool) {
return false;
}
});
【注意】上述对于验证不是太完整，但是基本的架子已经给出。
接下来我们来完整的演示整个过程。
上述我们一直是利用的纯HTML代码，当然也可以利用MVC的扩展方法来进行，如下（最终渲染的还是表单，本质上是一致的，就不做过多探讨了）
@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" id="file" name="file" />
<input type="submit" value="提交" />
}
结语
这一节我们比较详细的讲述了在MVC中如何进行文件的上传，但是我们还有一点未曾讲到，则是利用流来将如我们上述的图片转换成字节来插入到数据库中。有关上传可以参考园友Insus.NET对此利用流来上传。
为了方便大家在移动端也能看到我分享的博文，现已注册个人公众号，扫描上方左边二维码即可，欢迎大家关注，有时间会及时分享相关技术博文。
感谢花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧，让楼主能喝上一杯咖啡，在此谢过了！
如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！
本文版权归作者和博客园共有，来源网址：http://www.cnblogs.com/CreateMyself)/欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
<div class="clear"></div>
<div id="post_next_prev">
<a href="https://www.cnblogs.com/CreateMyself/p/5408400.html" class="p_n_p_prefix">« </a> 上一篇： <a href="https://www.cnblogs.com/CreateMyself/p/5408400.html" title="发布于 2016-04-19 18:29">ASP.NET MVC之Session State性能问题（七）</a>
<br>
<a href="https://www.cnblogs.com/CreateMyself/p/5419594.html" class="p_n_p_prefix">» </a> 下一篇： <a href="https://www.cnblogs.com/CreateMyself/p/5419594.html" title="发布于 2016-04-22 14:09">ASP.NET MVC之文件上传【二】（九）</a>
【活动】京东云服务器_云主机低于1折，低价高性能产品备战双11
【推荐】天翼云新用户专享，0元体验数十款云产品，立即开通
【活动】魔程社区技术沙龙—移动测试应用专场等你报名
【福利】学AI有奖：博客园&华为云 Modelarts 有奖训练营
· ASP.NET MVC之文件上传【一】（八）
· ASP.NET MVC之文件上传【一】
· ASP.NET MVC之文件上传【一】（八）
· ASP.NET MVC之文件上传【二】
· ASP.NET MVC之文件上传【二】（九）
<div id="google_ads_iframe_/1090369/C2_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/1090369/C2_0" title="3rd party ad content" name="google_ads_iframe_/1090369/C2_0" width="468" height="60" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;" data-google-container-id="2" data-load-complete="true"></iframe></div></div> </div> <div id="under_post_kb">· 世界上没有技术驱动型公司？
· 外媒：中国程序员抗议FB被解雇 引发中国人热议
· 英国电信掌门人：花7年时间才能将华为从英国电信基础设施中剥离
· 传音控股遇危局？华为小米进军非洲，"非洲之王"帽子还能戴多久？
· 拉卡拉拟以3亿元参与投资设立考拉鲲鹏基金
» 更多新闻...