打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
ASP.NET MVC 文件上传教程(一)

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

using System.IO;

...

               [HttpPost]

        public ActionResult Upload(HttpPostedFileBase file) {// file参数名应与页面上传控件的name属性相同

            if (file == null)

            {

                return Content("没有文件!", "text/plain");

            }

            var fileName = Path.Combine(Request.MapPath("~/Content/import"), Path.GetFileName(file.FileName));

            try

            {

                file.SaveAs(fileName);

                Import.ReadExcelToTable(fileName,null);//此处代码可以删除,上传成功后导入excel到数据库

                return Content("上传成功!", "text/plain");//此处为测试代码,根据需要修改

            }

            catch

            {

                return Content("上传异常 !", "text/plain");//此处为测试代码,根据需要修改

            }

}

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要和后台接收文件的参数一致。

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

 上述我们简单的上传了一个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(); }

我们接下来看看效果:

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

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

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

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

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

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

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

  • @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; } });

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

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

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

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

结语
这一节我们比较详细的讲述了在MVC中如何进行文件的上传,但是我们还有一点未曾讲到,则是利用流来将如我们上述的图片转换成字节来插入到数据库中。

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

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
ASP.NET Core MVC 从入门到精通之文件上传
php导出word(可包含图片)
网上书店的实现
LoadRunner中文件操作的一个例子
成功asp.net core下载文件
利用Fiddler2的Custom Rules自动抓取App的TOKEN并记录到文件
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服