ASP.NET MVC 使用表单上传文件

开发项目中经常会用到上传文件功能，之前在做 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"

最后上一张效果图。