利用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 提交表单【包括文件上传】
原文地址:http://www.cnblogs.com/liuruitao/p/7458308.html