ASP.NET MVC 文件上传教程(一)_实用技巧

这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看。

Upload File(一)
我们在默认创建的项目中的Home控制器下添加如下:

  public ActionResult UploadFile()
  {
   return View();
  }

  [HttpPost]
  public ActionResult UploadFile(HttpPostedFileBase file)
  {
   var fileName = file.FileName;
   var filePath = Server.MapPath(string.Format("~/{0}", "File"));
   file.SaveAs(Path.Combine(filePath, fileName));
   return View();
  }

在 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 = "博客地址")]
  [Required(ErrorMessage = "请输入你的博客地址!")]
  public string BlogAddress { get; set; }

  [Display(Name = "博客图片")]
  [Required(ErrorMessage = "请上传你的博客图片!")]
  [ValidateFile]
  public HttpPostedFileBase BlogPhoto { get; set; }
 }

上述未有验证文件的特性,只能自定义文件特性,如下:

 public class ValidateFileAttribute : ValidationAttribute
 {
  public override bool IsValid(object value)
  {
   int MaxContentLength = 1024 * 1024 * 4;
   string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };

   var file = value as HttpPostedFileBase;

   if (file == null)
    return false;
   else if (!AllowedFileExtensions.Contains(file.FileName.Substring(file.FileName.LastIndexOf('.'))))
   {
    ErrorMessage = "请上传你的博客图片类型: " + string.Join(", ", AllowedFileExtensions);
    return false;
   }
   else if (file.ContentLength > MaxContentLength)
   {
    ErrorMessage = "上传图片过大,不能超过4兆 : " + (MaxContentLength / 1024).ToString() + "MB";
    return false;
   }
   else
    return true;
  }
 }

我们可以任意设置上传的文件大小,我们设置为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>

 </fieldset>
</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);

  if (strName == null) {
   return null;
  }
  else {
   return strName[0];
  }
 }

(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中如何进行文件的上传,但是我们还有一点未曾讲到,则是利用流来将如我们上述的图片转换成字节来插入到数据库中。

有关上传可以参考这篇文章.NET对此利用流来上传。

作者和原文连接:Recluse_Xpy  http://www.cnblogs.com/CreateMyself/p/5414200.html

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索asp.net
, mvc
文件上传
,以便于您获取更多的相关知识。

时间: 2024-10-03 07:47:14

ASP.NET MVC 文件上传教程(一)_实用技巧的相关文章

asp.net多文件上传实例讲解_实用技巧

文件上传简单实现是非常容易的,但是想要更高的要求,比如通过ajax上传文件.一次上传多个文件.文件比较大等等,这里面的坑就不是很容易填(对于新手来说).因此在这里我准备通过ajax实现多文件上传.在开始贴代码之前,要注意几点: 1.<input type="file" />是必须要加name的,不知道为什么不加name属性,后台获取不到文件数据(有办法的大神可以在评论区提醒我),然后是multiple属性,当multiple="multiple"时,fi

实现ASP.NET多文件上传程序代码_实用技巧

upload.aspx 复制代码 代码如下: <%@ Page language="c#" Codebehind="UpLoad.aspx.cs" AutoEventWireup="false" Inherits="WebPortal.Upload" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

ASP.NET MVC文件上传教程(二)_实用技巧

上文ASP.NET MVC 文件上传教程(一)我们讲了简单的上传以及需要注意的地方,查相关资料时,感觉上传里面涉及到的内容还是比较多,于是就将上传这一块分为几节来处理,同时后续也会讲到关于做上传时遗漏的C#应该注意的地方,及时进行查漏补缺,尽量将这一块完善起来. 引入 上一节我们讲到了上传这一块,有朋友提出未涉及到大文件的上传这一块,思前想后还是来试着做做,毕竟之前没怎么去仔细考虑过这个问题,尤其还可以联系实际开发中创建文件夹等一系列问题,同时关于上传在网上随便找找都充斥着大量的组件,我们何必再

asp.net下大文件上传知识整理_实用技巧

最近做在做ePartner项目,涉及到文件上传的问题. 以前也做过文件上传,但都是些小文件,不超过2M. 这次要求上传100M以上的东西. 没办法找来资料研究了一下.基于WEB的文件上传可以使用FTP和HTTP两种协议,用FTP的话虽然传输稳定,但安全性是个严重的问题,而且FTP服务器读用户库获取权限,这样对于用户使用来说还是不太方便. 剩下只有HTTP.在HTTP中有3种方式,PUT.WEBDAV.RFC1867,前2种方法不适合大文件上传,目前我们使用的web上传都是基于RFC1867标准的

asp.net文件上传示例分享_实用技巧

方法一:用Web控件FileUpload,上传到网站根目录. Test.aspx关键代码: 复制代码 代码如下: <form id="form1" runat="server"><asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button1" runat="server" T

asp.net 文件上传实例汇总_实用技巧

ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. Test.aspx关键代码: 复制代码 代码如下:      <form id="form1" runat="server">     <asp:FileUpload ID="FileUpload1" runat="server"

asp.net html控件的File控件实现多文件上传实例分享_实用技巧

asp.net多文件上传使用html控件的File控件,在form中就需要加入[ enctype="multipart/form-data"]. up3.aspx文件代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="up3.aspx.cs" Inherits="up3" %> <!DOCTYPE ht

ASP.NET设计FTP文件上传的解决方案_实用技巧

如果要用ASP来作一个FTP文件上传的页面,我想很多人立刻就会想到要用第三方开发的组件,利用第三方的组件,虽然开发起来相对比较容易.但一般来说,免费下载的第三方的组件都有某些方面的功能限制,若要购买正版的第三方组件,对于国内的用户,花销也是一个不小的数字,就是能够承担的起,烦杂的手续也使很多人望而却步.虽然微软公司在本身的视窗系统里面也提供了一个可以用来上传文件的组件--Posting Acceptor.但用过这个组件的朋友们都有一种普遍的感觉,就是实在不好用. 现在好了,自从微软公司推出了.N

ASP.NET对大文件上传的解决方案_实用技巧

首先,我们需要下载这个名为 RanUpLoad 的组件. 下载完成之后,两个 dll 文件添加到项目的引用中区,xml 文件也要复制在项目中的 bin 文件夹下,也就是最后三个文件都要存在于 bin 文件夹中. 接着,上传控件还是用 ASP.NET 中自带的 FileUpload 控件,需要添加的就是在 FileUpload 控件旁边加入标签: <radU:RadProgressManager ID="Radprogressmanager1" Width="100%&q