Ajax 提交表单包括文件上传
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax 提交表单包括文件上传相关的知识，希望对你有一定的参考价值。
利用js插件实现
<script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script>
实例代码
前端：
@using WebSearch.EFDB; @{ ViewBag.Title = "UploadFeeCertificate"; NoveltyProxy proxy = ViewData["Proxy"] as NoveltyProxy; } <!DOCTYPE html> <html> <head> <title></title> <script src="@Url.Content("~/js/jquery-2.1.1.js")"></script> <link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet"> <link href="@Url.Content("~/font-awesome/css/font-awesome.css")" rel="stylesheet"> <link href="@Url.Content("~/css/plugins/iCheck/custom.css")" rel="stylesheet"> <link href="@Url.Content("~/css/animate.css")" rel="stylesheet"> <link href="@Url.Content("~/css/style.css")" rel="stylesheet"> <script src="@Url.Content("~/js/jquery-ui-1.10.4.min.js")"></script> <script src="@Url.Content("~/js/bootstrap.min.js")"></script> <script src="@Url.Content("~/js/bootstrap-table.js")"></script> <script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script> <script src="@Url.Content("~/js/selectjs/bootstrap-select.js")"></script> <link href="@Url.Content("~/js/selectjs/bootstrap-select.min.css")" rel="stylesheet" /> <script src="@Url.Content("~/js/selectjs/defaults-zh_CN.js")"></script> <script src="@Url.Content("~/js/layer/layer.js")"></script> <script src="@Url.Content("~/js/bootstrap.min.js")"></script> <script src="@Url.Content("~/js/plugins/metisMenu/jquery.metisMenu.js")"></script> <script src="@Url.Content("~/js/plugins/slimscroll/jquery.slimscroll.min.js")"></script> <!-- Custom and plugin javascript --> <script src="@Url.Content("~/js/inspinia.js")"></script> <script src="@Url.Content("~/js/plugins/pace/pace.min.js")"></script> <!-- iCheck --> <script src="@Url.Content("~/js/plugins/iCheck/icheck.min.js")"></script> <!-- Jvectormap --> <script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js")"></script> <script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js")"></script> <script src="@Url.Content("~/js/JsIFrame.js")"></script> <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script> </head> <body onload="IFrameResize()"> <div style="background-color:#f3f3f3;height:100%"> <div class="row"> <div class="col-lg-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>缴费单据上传</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i class="fa fa-wrench"></i> </a> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div> <form id="editform" method="post" enctype="multipart/form-data"> <div class="ibox-content"> <div class="form-group"> <p> 委托单：<input type="text" value="@proxy.PrjName_cn" readonly="readonly" style="width:25%;height:30px;margin-bottom:8px;border: 1px solid #ddd;"> <input type="hidden" name="proxyid" value="@proxy.ID" /> <input type="hidden" id="ispay" value="@proxy.IsPayed" /> </p> <p>选择上传文件：<input id="lefile" name="lefile" type="file" accept="image/*"></p> <p><input type="button" id="submitPic" class="btn btn-w-m btn-success" value="提交" /></p> </div> </div> </form> </div> </div> </div> </div> <script type="text/javascript"> $(function () { $("#submitPic").click(function () { $("#editform").ajaxSubmit({ url: "../FeeHistory/AjaxUploadFee", success: function (data) { var t = $.parseJSON(data); if (t.Result == true) { alert("上传成功！"); location.href = "../NoveltyProxy/ProxyManage" } else { alert("上传失败！"); } } }); }) }); </script> </body> </html>
2.后端代码：
/// <summary> /// AJAX提交上传收费凭据form /// </summary> /// <returns></returns> public string AjaxUploadFee() { RoleUser login = System.Web.HttpContext.Current.Session["Login"] as RoleUser; FeeHistory model = new FeeHistory(); model.Addtime = DateTime.Now; model.AddUserId = login.ID; model.AddUserName = login.UserName; model.ProxyID = Request.Form["proxyid"]; model.AdminChecked = false; HttpPostedFileBase uploadFile = Request.Files["lefile"] as HttpPostedFileBase; if (uploadFile != null) { int last = uploadFile.FileName.LastIndexOf("."); string name = uploadFile.FileName.Substring(last, uploadFile.FileName.Length - last); string docxname = "缴费说明" + DateTime.Now.ToString("yyyyMMddHHmmss") + name; string pathForSaving = Server.MapPath("~/Word/JFSM/" + docxname); uploadFile.SaveAs(pathForSaving); if (System.IO.File.Exists(pathForSaving)) { model.ImgUrl = "../Word/JFSM/" + docxname; } } bool result = Fls.AddFeeHistory(model); string Msg = ""; var Mod = new { Result = result, Msg = Msg }; string json = JsonConvert.SerializeObject(Mod); return json; }
注意。
Request.Form[]是根据控件的Name获取的，并不是ID。jq用久了可能会遗忘这个事情。以上是关于Ajax 提交表单包括文件上传的主要内容，如果未能解决你的问题，请参考以下文章
使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html