健忘者系列-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,所以在保存文件之前先做个判断就好了。