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

最近总结了各种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，所以在保存文件之前先做个判断就好了。