ASP.NET MVC如何实现文件上传
创始人
2024-11-28 12:43:22
0次

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 视图中添加上如下:


 
 

有关视图中我们就不必多说,只需明白如下两点:

(1)在后台利用HttpPostedFileBase来接收上传文件,该类为一个抽象类,但在ASP.NET Web Form却没有此类,此类的出现是为了更好的进行单元测试。

(2)在视图中文件类型的name要和后台接收文件的参数一致。

接下来我们进行演示看看结果:

ASP.NET MVC如何实现文件上传

 上述我们简单的上传了一个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兆,当然我们可以改变其默认设置。


此时我们接着在控制器中修改上述上传的方法: 

  [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();
  }

我们接下来看看效果:

ASP.NET MVC如何实现文件上传

咋回事,出状况了看来是我们的文件过大的原因,看了下该文件有接近45兆,而我们却设置的是40兆,于是乎继续在配置文件中去修改文件大小,但是结果还是一样。我们继续仔细看看该结果的提示,根据提示去找到配置文件下的节点再试试,我们在 syste.webServer 节点下设置为2G:

 
  
  
  
  
 

结果就好使了,查了查也有遇到类似问题的人,貌似只有给个结果,却没有给解释,为什么在 httpRuntime 中设置不行,但是有些这样设置是正确的,这是什么原因?最终找到了答案:

(1)在IIS 5和IIS 6中,默认文件上传的最大为4兆,当上传的文件大小超过4兆时,则会得到错误信息,但是我们通过如下来设置文件大小。


 

(2)在IIS 7中,默认文件上传的最大为28.6兆,当超过其默认设置大小,同样会得到错误信息,但是我们却可以通过如下来设置文件上传大小。


 
 
  
 
 

【类推的话,个人觉得可能是在IIS 7+以上都是通过如上述IIS 7来设置文件上传大小】

虽然我们在服务器端对其进行验证,但是我们觉得这样还是不能保险,我们继续在客户端对其上传的图片类型和大小进行验证。

(1)利用强类型视图给出视图代码:


 .field-validation-error {
  color: red;
 }


 
         
  •     @Html.LabelFor(m => m.BlogName)     @Html.TextBoxFor(m => m.BlogName, new { maxlength = 50 })     @Html.ValidationMessageFor(m => m.BlogName)    
  •    
  •     @Html.LabelFor(m => m.BlogAddress)     @Html.TextBoxFor(m => m.BlogAddress, new { maxlength = 200 })     @Html.ValidationMessageFor(m => m.BlogAddress)    
  •    
  •     @Html.LabelFor(m => m.BlogPhoto)     @Html.TextBoxFor(m => m.BlogPhoto, new { type = "file" })     @Html.ValidationMessageFor(m => m.BlogPhoto)         
  •    
  •         
  •     

    (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;
       }
      });

    【注意】上述对于验证不是太完整,但是基本的架子已经给出。

    接下来我们来完整的演示整个过程。

    ASP.NET MVC如何实现文件上传

    上述我们一直是利用的纯HTML代码,当然也可以利用MVC的扩展方法来进行,如下(最终渲染的还是表单,本质上是一致的,就不做过多探讨了)

    @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    
     
     
    }

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
    格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
    空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...