当debug到这里，你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流。
这就是我要说的，当使用Ajax.BeginForm(jquery.unobtrusive-ajax.js) 异步上传是不可行的，因为文件流不会被C#代码读取，但是并不影响 Ajax.BeginForm(jquery.unobtrusive-ajax.js) 异步提交表单的特性。
那我我们应该如何异步提交表单呢？
利用 $("#formID").ajaxSubmit({});这个方法异步提交表单并且上传文件。
第一步：引入js 注意顺序
<script src="/Style/js/jquery-1.8.3.min.js"></script>
<script src="~/Style/js/jquery-form.js"></script>
jquery-form.js下载地址：http://download.csdn.net/download/yusewuhen/7203209
第二步：
<form id="formID" method="post" enctype="multipart/form-data">
<div class="inner text-center">
<table class="" id="mess">
<caption>基础信息</caption>
<tr class="margin-top">
<td class="padding-top text-center">手机号</td>
<td><input type="text" class="inputs" id="Phone" name="Phone"> </td>
<td><input type="button" value="获取验证码" id="sms" onclick="sendemail()"></td>
</tr>
<tr>
<td class="padding-top text-center">验证码</td>
<td><input type="text" class="inputs" id="Code" name="Code"></td>
</tr>
<tr>
<td class="padding-top text-center">身份证</td>
<td><input type="text" class="inputs" id="IdCard" name="IdCard"></td>
</tr>
<tr>
<td class="padding-top text-center">身份证照片</td>
<td>
<div class="ge_pic_icon_Infor">
<img src="data:images/zhengmian.png" />
</div>
<div class="Infor_file">
<input type="file" name="IdCardPos" id="IdCardPos" title="上传身份证正面照片" />
</div>
</td>
<td>
<div class="ge_pic_icon_Infor2">
<img src="data:images/fanmian.png" />
</div>
<div class="Infor_file2">
<input type="file" name="IdCardNeg" id="IdCardNeg" title="上传身份证反面照片" />
</div>
</td>
</tr>
</table>
<input class="submit next-btn" type="button" value="下一步" onclick="next_step()" />
</div>
</form>
第三步：js处理异步提交
function next_step() {
$("#formID").ajaxSubmit({
url: "/College/BaseInfo",
type: "post",
success: function (data) {
//alert("ok");
$(".detail-message6").css({ "display": "none" });
$(".detail-message7").css({ "display": "block" });
},
error: function (aa) {
//console.log(aa);
$(".detail-message2").css({ "display": "none" });
$(".detail-message6").css({ "display": "block" });
$(".detail-message7").css({ "display": "none" });
}
});
}
第四步：后台控制器处理
public ActionResult BaseInfo()
{
//上传的图片路径
string dir = "/Style/Upload/IdCard/";
HttpPostedFileBase IdCardPos = Request.Files["IdCardPos"];
HttpPostedFileBase IdCardNeg = Request.Files["IdCardNeg"];
#region 接收参数校验
if (string.IsNullOrWhiteSpace(Request["Phone"]))
{
return Content("手机号不能为空！");
}
if (string.IsNullOrWhiteSpace(Request["Code"]))
{
return Content( "验证码不能为空！");
}
if (string.IsNullOrWhiteSpace(Request["IdCard"]))
{
return Content( "身份证号不能为空！");
}
if (IdCardPos == null)
{
return Content("请上传身份证正面照片！");
}
if (IdCardNeg == null)
{
return Content("请上传身份证反面照片！");
}
#endregion //获取缓存的验证码
Object Code = CacheOpt.GetCache("Code");
if (Code.ToString() != Request["Code"] || String.IsNullOrEmpty(Code.ToString()))
{
return Content("手机验证码不正确或已失效,请重新获取验证码！");
} #region 上传身份证照片
Dictionary<string, string> DicInfo = new Dictionary<string, string>();
Dictionary<string, string> DicInfo2 = new Dictionary<string, string>();
try
{
DicInfo = UploadImg(IdCardPos, dir);
if (DicInfo["Result"] == "")
{
return Content("身份证正面照片上传的类型错误！");
} DicInfo2 = UploadImg(IdCardNeg, dir);
if (DicInfo2["Result"] == "")
{
return Content("身份证反面照片上传的类型错误！");
}
}
catch
{
return Content("身份证正照片上传失败！");
}
#endregion #region 将数据提添加到集合中
Dictionary < string, string> myDic = new Dictionary<string, string>();
myDic.Add("Phone", Request["Phone"]);
myDic.Add("IdCard", Request["IdCard"]);
myDic.Add("IdCardPos", DicInfo["ImagePath"]);
myDic.Add("IdCardNeg", DicInfo2["ImagePath"]);
myDic.Add("Status", Convert.ToString(""));
#endregion #region 添加数据到数据库
bool res = collegeService.AddBaseInfo1(myDic);
if (res == false)
{
return Content("fail");
}
#endregion
return Content("ok");
}
#region 上传图片
private Dictionary<string, string> UploadImg(HttpPostedFileBase file, string dir)
{
string Image_Path = null; //保存的文件
Dictionary<string, string> DicInfo = new Dictionary<string, string>(); //返回的文件信息 //判断上传文件的类型
string fileName = Path.GetFileName(file.FileName); //获取文件名
string fileExt = Path.GetExtension(fileName); //获取扩展名 if (fileExt == ".jpg" || fileExt == ".gif" || fileExt == ".png")
{
//创建文件夹
Directory.CreateDirectory(Path.GetDirectoryName(Request.MapPath(dir)));
//需要对上传的文件进行重命名
string newfileName = Guid.NewGuid().ToString();
//构建文件完整路径
string fullDir = dir + newfileName + fileExt;
file.SaveAs(Request.MapPath(fullDir)); //保存文件
//将上传成功的图片的路径存到数据库中
Image_Path = newfileName + fileExt;
DicInfo.Add("ImagePath", Image_Path);
DicInfo.Add("Result","");
}
else
{
DicInfo.Add("ImagePath", "");
DicInfo.Add("Result", "");
}
return DicInfo;
}
#endregion
当debug到这里，你们就发现不管是 Request.Files["Upload"]亦或是 Request.Files[0] 都可以取到文件流。
当controller返回值也可以成功进入seccess方法中。
请注意我代码中标红的位置，以防遗漏导致一直debug无果问题！
总结一下：
1.MV5 5.0中异步提交表单方法两种：
Ajax.BeginForm(new AjaxOptions:post) 和 $("#formID").ajaxSubmit({})
2.MVC 5.0中异步提交表单上传文件一种：
$("#formID").ajaxSubmit({})