分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

asp.net mvc  Ajax.BeginForm 异步上传图片的问题

发布时间:2023-09-06 01:07责任编辑:郭大石关键词:Ajax上传图片

当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="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="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"] == "0") ???????????????{ ???????????????????return Content("身份证正面照片上传的类型错误!"); ???????????????} ??????????????????????????????DicInfo2 = UploadImg(IdCardNeg, dir); ????????????????????????????????????????????????if (DicInfo2["Result"] == "0") ???????????????{ ???????????????????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("1")); ???????????#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","1"); ???????????} ???????????else ???????????{ ???????????????DicInfo.Add("ImagePath", ""); ???????????????DicInfo.Add("Result", "0"); ???????????} ???????????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({})

asp.net mvc  Ajax.BeginForm 异步上传图片的问题

原文地址:http://www.cnblogs.com/zouke1220/p/7462713.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved