开发项目中经常会用到上传文件功能,之前在做 WebForm 开发的时候写过上传功能都是基于 Handlers 的,最近在弄一个上传身份证的功能想通过 MVC 的表单直接提交到后台,所以研究了下文件上传,下面是我实际应用中的使用方法,供大家参考。
HttpFileCollectionBase files = Request.Files;
if (files.Count != 0 && files.AllKeys.Count() == 2)
{
string fileName = DateTime.Now.ToString("yyyyMMddhhmmss");
if (files["IdCardFacePic"] != null)
{
var picIdCardFace = files["IdCardFacePic"];
string expName = Path.GetFileName(picIdCardFace.FileName).Split('.').LastOrDefault();
var picIdCardFacePath = Path.Combine(Request.MapPath(string.Format("~/{0}{1}", ImagesUpload, IdCardUpload)), "IdCardFace_" + fileName + "." + expName);
try
{
picIdCardFace.SaveAs(picIdCardFacePath);
model.IdCardFacePicUrl = Path.Combine(string.Format("{0}{1}", ImagesUpload, IdCardUpload), "IdCardFace_" + fileName + "." + expName);
}
catch
{
//return Content("上传异常 !", "text/plain");
}
}
if (files["IdCardBackPic"] != null)
{
var picIdCardBack = files["IdCardBackPic"];
string expName = Path.GetFileName(picIdCardBack.FileName).Split('.').LastOrDefault();
var picIdCardBackPath = Path.Combine(Request.MapPath(string.Format("~/{0}{1}", ImagesUpload, IdCardUpload)), "IdCardBack_" + fileName + "." + expName);
try
{
picIdCardBack.SaveAs(picIdCardBackPath);
model.IdCardBackPicUrl = Path.Combine(string.Format("{0}{1}", ImagesUpload, IdCardUpload), "IdCardBack_" + fileName + "." + expName);
}
catch
{
//return Content("上传异常 !", "text/plain");
}
}
}
前端 View
@using (Html.BeginForm("Edit", "User", FormMethod.Post, new { @id = "submitForm", enctype = "multipart/form-data" }))
{
@Html.HiddenFor(m => m.Id)
@*@Html.HiddenFor(m=>m.us)*@
<div class="page27-form">
<div class="f-form01-item">
<label class="f-form01-label">姓名</label>
<div class="f-form01-main">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "f-form01-input100", @id = "policyHolderName" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "f-form01-input100" })
</div>
</div>
<div class="f-form01-item" id="divIdCardBox">
<label class="f-form01-label">证件号码</label>
<div class="f-form01-main">
@Html.EditorFor(model => model.IdCard, new { htmlAttributes = new { @class = "f-form01-input100", @id = "policyHolderIdCardNumber" } })
@Html.ValidationMessageFor(model => model.IdCard, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="page27-sfz" id="divIdCardPicBox">
<div class="f-form01-item">
@if (string.IsNullOrEmpty(Model.IdCardFacePicUrl))
{
<div class="f-form01-main">
上传身份证正面
</div>
}
else
{
<div class="f-form01-main">
<img src="@Url.Content(Model.IdCardFacePicUrl)" width="100px" height="50px" alt="img" />
</div>
}
<div class="f-form01-other">
<a href="#" id="btnUploadFacePic" class="f-button02">上传正面</a>
<input class="f-button02" name="IdCardFacePic" id="IdCardFacePicUrl" type="file" style="display:none" autocomplete="off" disableautocomplete="">
</div>
</div>
<div class="f-form01-item">
@if (string.IsNullOrEmpty(Model.IdCardBackPicUrl))
{
<div class="f-form01-main">
上传身份证反面
</div>
}
else
{
<div class="f-form01-main">
<img src="@Url.Content(Model.IdCardBackPicUrl)" width="100px" height="50px" alt="img" />
</div>
}
<div class="f-form01-other">
<a href="#" id="btnUploadBackPic" class="f-button02">上传反面</a>
<input class="f-button02" name="IdCardBackPic" id="IdCardBackPicUrl" type="file" style="display:none" autocomplete="off" disableautocomplete="">
</div>
</div>
</div>
<input class="f-button01" type="submit" id="btnSubmit" style="margin-top: 1rem;" value="保存">
}
需要注意的是 Form 里要加上 enctype 属性,不然后台无法接收到上传的图片文件。
enctype = "multipart/form-data"
最后上一张效果图。