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

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

ajax提交表单,支持文件上传
当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求. 1.表单写 ...
php使用jquery Form ajax 提交表单，并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
ajax提交表单包括文件
<script src="${pageContext.request.contextPath}/assets/js/jquery-1.8.3.js"></scri ...
Struts2文件上传（基于表单的文件上传）
•Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目 •Commons-Fil ...
[原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
表单多文件上传样式美化 && 支持选中文件后删除相关项
开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...
4 django系列之HTML通过form标签来同时提交表单内容与上传文件
preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...
php+form表单的文件上传
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
2020最新Servlet+form表单实现文件上传(图片)
servlet实现文件上传接受这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找代码奉上 ...
form表单多文件上传
1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

随机推荐

JAVA基础细谈
JAVA基础细谈一. 源文件和编译后的类文件源文件的本质就是程序文件,是程序员编写,是人看的.而编译后的类文件是给电脑看的文件.一个类就是一个文件,无论这个类写在哪里,编译以后都是一个文件 ...
采用Psyco实现python执行速度提高到与编译语言一样的水平
本文实例讲述了采用Psyco实现python执行速度提高到与编译语言一样的水平的方法,分享给大家供大家参考.具体实现方法如下: 一.安装Psyco很简单,它有两种安装方式,一种是源码方式,一种是二进制 ...
java 02 内部类
比利牛斯獒犬 flask web
1. 使用 session.get('name') 直接从会话中读取 name 参数的值.和普通的字典一样,这里使用 get() 获取字典中键对应的值以避免未找到键的异常情况,因为对于不存在的键, g ...
3.4-3.6 依据业务需求分析HBase的表设计
一.依据[话单]查询需求分析HBase的表设计 1.分析用户需要进行实时的查询,那么这些数据是放在HBase当中的,每个客户每天接打电话至少20个左右,而通信公司拥有很多用户,每天产生的数据都是上亿 ...
shell编程流程控制
前言: 在linux shell中,通常我们将一些命令写在一个文件中就算是一个shell脚本了,但是如果需要执行更为复杂的逻辑判断,我们就需要使用流程控制语句来支持了. 所谓流程控制既是通过使用流程控 ...
spown mj
local function getmjvalnew(key) local keynew = {} local sumnval = 0 for _, v in ipairs(key) do if v& ...
windows ping得通，连接不上网
这是被电脑安装的软件拦截的现象,我们只需要使用. netsh winsock reset 重启电脑即可
C/C++内存检测工具Valgrind
内存检测Valgrind简介 Valgrind是运行在Linux上一套基于仿真技术的程序调试和分析工具,作者是获得过Google-O'Reilly开源大奖的Julian Seward, 它包含一个内核 ...
大白话5分钟带你走进人工智能-第二十九节集成学习之随机森林随机方式，out of bag data及代码(2)
大白话5分钟带你走进人工智能-第二十九节集成学习之随机森林随机方式 ,out of bag data及代码(2) 上一节中我们讲解了随机森林的基本概念,本节的话我们讲解随机森 ...

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

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

随机推荐

热门专题