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="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" ...
随机推荐
- HihoCoder 1502 : 最大子矩阵 (双指针)
描述 给定一个NxM的矩阵A和一个整数K,小Hi希望你能求出其中最大(元素数目最多)的子矩阵,并且该子矩阵中所有元素的和不超过K. 输入 第一行包含三个整数N.M和K. 以下N行每行包含M个整数,表示 ...
- groovy语言和grails框架
Groovy 是一种动态语言,它在 JVM 上运行,并且与 Java 语言无缝集成. Groovy 可以大大减少 Java 代码的数量.在 Groovy 中,不再需要为字段编写 getter 和 se ...
- 关于ubuntu 16.04 docker常用命令
1.sudo docker ps -a 查看当前docker实例的信息: CONTAINER ID IMAGE COMMAND ...
- C++之const类成员变量，const成员函数
const修饰类的成员函数 const修饰变量一般有两种方式:const T *a,或者 T const *a,这两者都是一样的,主要看const位于*的左边还是右边,这里不再赘述,主要来看一下当co ...
- android手机各大分区详解
1. bootloader 当我们拿到一款手机,第一件事应该就是按下电源键开机,那么从开机到进入到桌面程序这中间发生了些什么呢,我们从下面这张简化了的手机结构图开始: 注意:该结构图并不反映手机的实 ...
- zabbix proxy安装及使用
首先我萌先理解下为什么要突然冒出zabbix proxy 它是一个代理,也就是agent与server的中间层,他会代替server收集agent的数据保存起来,然后推送给server,那么很明显,它 ...
- org.apache.catalina.LifecycleException报错解决方法
严重: A child container failed during startjava.util.concurrent.ExecutionException: org.apache.catalin ...
- Hadoop2 使用 YARN 运行 MapReduce 的过程源码分析
Hadoop 使用 YARN 运行 MapReduce 的过程如下图所示: 总共分为11步. 这里以 WordCount 为例, 我们在客户端终端提交作业: # 把本地的 /home/hadoop/t ...
- mptcp文献汇总
1 https://www.blackhat.com/docs/us-14/materials/us-14-Pearce-Multipath-TCP-Breaking-Todays-Networks- ...
- c/c++面试23-29
23 一般引用的用法 (1)代码 #include <iostream> #include <string> using namespace std; int main(int ...