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="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用久了可能会遗忘这个事情。

时间： 2024-10-28 10:11:14

Ajax 提交表单【包括文件上传】的相关文章

Struts2文件上传（基于表单的文件上传）

•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-FileUpload组件特点 –使用简单:可以方便地嵌入到JSP文件中,编写少量代码即可完成文件的上传功能 –能够全程控制上传内容 –能够对上传文件的大小.类型进行控制 •需要下载Common-FileUplaod框架地址(当然MyEclipce中Struts2支持里自带有这两个包): –http://jak

AJAX提交form表单带文件上传

过了三天才想要写博客,这样不好,要改正在做毕设的时候,用户发帖涉及到了文件上传的问题,在这里记录一下背景: 在用户发帖的时候,用户只想发表文字postText,还有些用户想在发表postText的同时还发表一些图片,如何做? 上代码不写的太细了,和流水账似的,挑重点记录一下. 1.前台的文件上传本来想用form表单直接上传了,但是form提交时会刷新整个页面,但这不是我想要的,所以使用了ajax提交form表单. 利用ajax提交表单需要用到jquery.form.js这个包,网上有很多

云控后台系统经验总结（表单和文件上传等）

1. qq emoji替换接收到这样的字符串,通过正则匹配到每组方括号然后进行替换 var _str = i.content.replace(/\[.{1,3}\]/g, (str) => { //i.content为遍历出来的消息记录 var index; Object.keys(faceCode).forEach((key, _index) => { //faceCode为字符串与样式对应的关系,也可以通过参数去和后台约定好,不用这样查找 if (key === str) { index

(25) java web的struts2框架的使用-基于表单的文件上传

一,首先创建一个表单页面 <body> <form action="uploads" method="post" enctype="multipart/form-data"> 文件: <input type="file" name="uploadObject"> <input type="submit" value="提交"&

9.16 基于form表单的文件上传实现 ContextType

基于form表单传递普通键值对的方式传递数据: enctype="application/x-ww-form-urlencoded" 基于form表单上传文件传递数据,非键值对: enctype="multipart/form-data" enctype="text/plain" 这种方式几乎不用基于ajax传递普通键值对的方式传递数据到服务器只要请求体有数据,request.body都有值 .但request.post 只有当conten

java模拟post方式提交表单实现图片上传【转】

转自:http://blog.csdn.net/5iasp/article/details/8669644 模拟表单html如下: <form action="up_result.jsp" method="post" enctype="multipart/form-data" name="form1" id="form1"> <label> <input type="

java表单+多文件上传~~源代码

private static final String C_ACTION_CREAT_ACTIVITY = "meeting_register_addActivity"; @RequestMapping(value = "/addActivity") public CIPResponseMsg addActivity(HttpServletRequest request, HttpServletResponse response) throws Exception

django_5：表单1——文件上传

上传文件1 class UserForm(forms.Form): name = forms.CharField() headImg = forms.FileField() def regist(req): if req.method == 'POST': uf = UserForm(req.POST, req.FILES) if uf.is_valid(): print(uf.cleaned_data['name']) #通过clean_data获取字段 print(req.FILES) #类

ajax提交表单、ajax实现文件上传

ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单方式二:使用jquery的$.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax) 方式三:使用jquery插件ajaxFileUpload.js, 支持上传文件,但不支持提交表单方式四:使用jquery.from.js,支持提交同时

fileupload form表单提交(包括文件上传)

需要的jar包:commons-fileupload-1.3.1.jar 示例代码: package com.expai.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import javax.servlet.ServletException; import javax.servlet.http.HttpS