zoukankan      html  css  js  c++  java
  • 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="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用久了可能会遗忘这个事情。
  • 相关阅读:
    IDEA的Debug详解
    websocket学习(转载)
    Shiro授权及注解式开发
    Redis分布式缓存安装和使用
    JEESZ-SSO解决方案
    英语是学习Java编程的基础吗
    深入分析 ThreadLocal 内存泄漏问题
    这些JVM命令配置参数你知道吗?
    安全开发Java动态代理
    学java编程软件开发,非计算机专业是否能学
  • 原文地址:https://www.cnblogs.com/liuruitao/p/7458308.html
Copyright © 2011-2022 走看看