通过Ajax提交form表单来提交上传文件
Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如:
$.ajax({
url : "http://localhost:8080/",
type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
},
error : function(data) {
}
});
但是这种方式如果表单中有需要提交的文件类型 这样则不行 后台接不到数据。
解决办法:使用 FormData。这里使用jquery 最好使用2.0版本之后 之前应该不支持。例如:
<form id="form">
<P class="p5"><span><i>*</i>商户证书:</span>
<input type='text' name='apiclientType' id='textfield' class='w_txt' >
<input type='button' class='w_btn' value='上传证书' />
<input type="file" name="fileField" class="w_file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
</P> </form>
var formData = new FormData(document.getElementById("form"));//表单id
$.ajax({
url: '${ctx}/wmManage/saveWeixinConfig.do' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
}
});
附上后台数据接收:
@RequestMapping("/saveWeixinConfig")
@ResponseBody
public ResultMsg saveWeixinConfig(@RequestParam(value = "fileField",required = false)MultipartFile fileField) throws IOException {
return "";
}
通过Ajax提交form表单来提交上传文件的更多相关文章
- $_FILES参数详解及简单<form>表单无刷新上传文件
$_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- 4 django系列之HTML通过form标签来同时提交表单内容与上传文件
preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...
- jQuery Ajax 确定 form 表单 submit 提交成功
使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
随机推荐
- Angungular.js 的过滤器&工具方法
字母大小写 数字 货币 截取字符串 截取数组 用JS操作 ----------------------------------------------------------------------- ...
- Leetcode572.Subtree of Another Tree另一个树的子树
给定两个非空二叉树 s 和 t,检验 s 中是否包含和 t 具有相同结构和节点值的子树.s 的一个子树包括 s 的一个节点和这个节点的所有子孙.s 也可以看做它自身的一棵子树. 示例 1: 给定的树 ...
- JS常用属性方法大全
1. 输出语句 : document.write(""); 2.JS 中的注释为 : // 3. 传统的 HTML 文档顺序是 : document->html->(h ...
- Djangog写XXOO管理的要求以及思路
- 【笔记】LR录制方式和常用函数
本文为本人复习LR时,笔记整理.以备后续查阅. 注意:录制脚本时,选择不同的协议下录制时设置选项也是不相同的,我们这里介绍的是基于协议web(http/html)录制选项设置. 对于web(http/ ...
- 高效整洁CSS代码原则 (下)
6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...
- zt 比较各JAX-RS实现:CXF,Jersey,RESTEasy,Restlet
http://news.misuland.com/20080926/1222396399411.html JavaSE/EE执行委员批准了JSR 311 JAX-RS作为支持RESTful web服务 ...
- eNSP模拟器路由器无法正常启动一直显示“#”——问题解决方法
eNSP模拟器路由器无法正常启动一直显示“#” 问题项如截图: 解决方案: 1. 打开自己电脑的控制面板 -->> 系统和安全 -->> Windows Defender防火墙 ...
- 关于父组件通过v-on接收子组件多个参数的一点研究
写组件的时候遇到一个需求,我需要在子组件向父组件传递信息 this.$emit('myEvent', 信息1, 信息2) 在父组件使用v-on来接收 <my-component @myEvent ...
- python findall函数