ASP.NET MVC 文件上传教程(一）

网络编程 2024/11/16 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

这一节我们来讲讲在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,文件上传

标签：

ASP.NET,MVC,文件上传

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“ASP.NET MVC 文件上传教程(一）”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

ASP.NET MVC 文件上传教程(一）

ASP.NET,MVC,文件上传

ASP.NET MVC实现图片上传、图片预览显示

ASP.NET调用WebService服务的方法详解

评论“ASP.NET MVC 文件上传教程(一）”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

ASP.NET MVC 文件上传教程(一）

ASP.NET,MVC,文件上传

ASP.NET MVC实现图片上传、图片预览显示

ASP.NET调用WebService服务的方法详解

评论“ASP.NET MVC 文件上传教程(一）”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存