健忘者系列-MVC图片上传（一）

来源：互联网发布：windows x键编辑：程序博客网时间：2024/04/30 09:13

最近总结了各种MVC图片上传的方法，现在做个记录，我们一步一步来，从简单的开始。

第一编我们不用插件，不用异步，不传多个，直接提交表单上传图片。

首先介绍一下 HTML <form> 标签的 enctype 属性

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

我们要在ui那里将enctype = "multipart/form-data"

下面是客户端的代码

<form action="/Demo/UploadImage" method="post" enctype="multipart/form-data">    <input type="file" name="Image">    <input type="submit" value="上传"></form>

备注：这里要注意的是file的input要写上name属性，后台参数列表的名字是对应name的。

服务器接收客户端提交上来的图片我们可以用HttpPostedFileBase接收，也可以用 Request.Files接收。

下面是HttpPostedFileBase的方式

        [HttpPost]        public ActionResult UploadImage(HttpPostedFileBase image)        {            if (image != null && image.ContentLength > 0)            {                //存储的时候我们可以使用下面的方法拿到我们想要的东西                //Path.GetFileName(image.FileName);//拿到文件名和扩展名 head.jpg                //Path.GetFileNameWithoutExtension(image.FileName);//拿到文件名 head                //Path.GetExtension(image.FileName);//拿到扩展名 .jpg                 string filePath = Path.Combine(Server.MapPath("~/UploadPic"), image.FileName);                image.SaveAs(filePath);            }            return RedirectToAction("Index");        }

下面是Request.Files的方式

        [HttpPost]        public ActionResult UploadImage()        {            if (Request.Files.Count > 0 && Request.Files[0] != null)            {                HttpPostedFileBase file = Request.Files[0];                string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);                file.SaveAs(filePath);            }            return RedirectToAction("Index");         }

结果图片就会上传到项目的UploadPic目录了，例子比较简单，以后我们会对图片进行处理，截图缩略图改名字等。

接着我们上传多个文件

我们还是不用插件，不用异步，直接提交表单上传多个文件。

下面是客户端的代码

    <form action="/Demo/UploadImage" method="post" enctype="multipart/form-data">        <input type="file" name="images">        <input type="file" name="images">        <input type="file" name="images">        <input type="submit" value="上传">    </form>

备注：这里要注意的就是把name都改成相同的。

下面是服务器端的代码

第一种方式

        [HttpPost]        public ActionResult UploadImage(IEnumerable<HttpPostedFileBase> images)        {            if (images != null && images.Any())            {                foreach (HttpPostedFileBase file in images)                {                    if (file.ContentLength == 0) continue;                    string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);                    file.SaveAs(filePath);                }            }            return RedirectToAction("Index");        }

第二种方式

        [HttpPost]        public ActionResult UploadImage()        {              if (Request.Files != null && Request.Files.Count > 0)            {                for (int i = 0; i < Request.Files.Count; i++)                {                    HttpPostedFileBase file = Request.Files[i];                    if (file.ContentLength == 0) continue;                    string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);                    file.SaveAs(filePath);                 }            }             return RedirectToAction("Index");        }

注意：后台的时候我测试了一下，就算不选择文件直接提交表单，images和Files都不会为空的，只是file的ContentLength==0，所以在保存文件之前先做个判断就好了。

0 0