• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

C#MVC文件上传ASP.NETMVC之文件上传【一】(八)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

ASP.NET MVC之文件上传【一】(八)

        </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 &gt;<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;">&lt;/</span><span style="color: #800000;">fieldset</span><span style="color: #0000ff;">&gt;</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 >

<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>
posted @ 收藏
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#1楼

            <!-- PostDate -->

2016-04-21 19:05

            <!--NameLink-->
            

        <a >诗人杨过</a>

            <div class="feedbackCon">
11111111
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#2楼

            <!-- PostDate -->

2016-04-21 22:48

            <!--NameLink-->
            

        <a >nnubat</a>

            <div class="feedbackCon">
然而貌似并没有涉及到大文件上传真正关键的地方啊,断点
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#3楼

[楼主]

            <!-- PostDate -->

2016-04-21 23:27

            <!--NameLink-->
            

        <a >Jeffcky</a>

            <div class="feedbackCon">
@ nnubat
关于文件断点续传,园子有例。
https://pic.cnblogs.com/face/589642/20170408023038.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#4楼

            <!-- PostDate -->

2018-06-21 20:12

            <!--NameLink-->
            

        <a >seliote</a>

            <div class="feedbackCon">
万分感谢...
https://pic.cnblogs.com/face/1267954/20180715105017.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#5楼

            <!-- PostDate -->

2018-12-05 17:05

            <!--NameLink-->
            

        <a >~雨落忧伤~</a>

            <div class="feedbackCon">
支持
https://pic.cnblogs.com/face/856389/20171120165836.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#6楼

            <!-- PostDate -->

2018-12-26 11:56

            <!--NameLink-->
            

        <a >风华异世</a>

            <div class="feedbackCon">
是不是在mvc5中这个方法就是错的,我试了很久还是不行 报错找不到视图,意思就是没有调用到那个控制器里面的方法
https://pic.cnblogs.com/face/1126838/20170315190845.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#7楼

[楼主]

            <!-- PostDate -->

2018-12-26 12:43

            <!--NameLink-->
            

        <a >Jeffcky</a>

            <div class="feedbackCon">
@ 风华异世
是一样的,我用的就是mvc5,没有调用方法是你ajax调用的问题
https://pic.cnblogs.com/face/589642/20170408023038.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#8楼

            <!-- PostDate -->

2018-12-26 12:52

            <!--NameLink-->
            

        <a >风华异世</a>

            <div class="feedbackCon">
@ Jeffcky
首先感谢博主的回复 我用的你的第一个方法 里面我也没看到ajax啊 我是一个初学者 抱歉
https://pic.cnblogs.com/face/1126838/20170315190845.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#9楼

            <!-- PostDate -->

2018-12-26 13:44

            <!--NameLink-->
            

        <a >风华异世</a>

            <div class="feedbackCon">
现在可以上传了 但是找不到上传的文件 file文件夹是空的
https://pic.cnblogs.com/face/1126838/20170315190845.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#10楼

[楼主]

            <!-- PostDate -->

2018-12-26 23:18

            <!--NameLink-->
            

        <a >Jeffcky</a>

            <div class="feedbackCon">
@ 风华异世
你哪里代码有问题勒。
https://pic.cnblogs.com/face/589642/20170408023038.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#11楼

            <!-- PostDate -->

2018-12-27 08:19

            <!--NameLink-->
            

        <a >风华异世</a>

            <div class="feedbackCon">
@ Jeffcky
你的获取文件名的语句在vs2017中无效 所以不行 你可以试试
https://pic.cnblogs.com/face/1126838/20170315190845.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#12楼

            <!-- PostDate -->

2019-05-21 14:18

            <!--NameLink-->
            

        <a >孙丽媛</a>

            <div class="feedbackCon">
是的vs17中是不行的
https://pic.cnblogs.com/face/1001363/20181103160518.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#13楼

[楼主]

            <!-- PostDate -->

2019-05-21 14:22

            <!--NameLink-->
            

        <a >Jeffcky</a>

            <div class="feedbackCon">
@ 孙丽媛
看看ASP.NET Core MVC系列文件上传,这是之前的可能不好使了,未测试过
https://pic.cnblogs.com/face/589642/20170408023038.png
            </div>
        </div>
    </div>
    <div class="feedbackItem">
        <div class="feedbackListSubtitle">
            <div class="feedbackManage">
                &nbsp;&nbsp;
回复 引用
            </div>
            <!-- Title -->

#14楼

[楼主]
2019/7/28 下午11:57:03

            <!-- PostDate -->

2019-07-28 23:57

            <!--NameLink-->
            

        <a >Jeffcky</a>

            <div class="feedbackCon">
@ 孙丽媛
@风华异世


vs2019中试了好使,没有vs2017环境。
https://pic.cnblogs.com/face/589642/20170408023038.png
            </div>
        </div>
    </div>

前言

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
c#中的转义字符发布时间:2022-07-14
下一篇:
C#流程控制语句发布时间:2022-07-14
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap