Ajax 提交表单【包括文件上传】

利用js插件实现

实例代码

前端：

@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="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 提交表单【包括文件上传】

相关推荐