Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如:



  1. $.ajax({


  2.      url : "http://localhost:8080/",


  3.      type : "POST",


  4.      data : $( '#postForm').serialize(),


  5.      success : function(data) {



  6.      },


  7.      error : function(data) {


  8.      }


  9. });

但是这种方式如果表单中有需要提交的文件类型 这样则不行 后台接不到数据。

解决办法:使用 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表单来提交上传文件的更多相关文章

  1. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  2. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  3. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  4. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  5. FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置

    安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...

  6. jQuery Ajax 确定 form 表单 submit 提交成功

    使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...

  7. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

  8. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  9. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

随机推荐

  1. top进程命令

    top命令用来显示系统当前的进程状况. 格式:top [选项] 主要选项如下. d:指定更新的间隔,以秒计算. q:没有任何延迟的更新.如果使用者有超级用户,则top命令将会以最高的优先序执行. c: ...

  2. shared_from_this bad_weak_ptr的原因

    原因:创建类A的对象的时候没有用智能指针包裹,而是直接new的裸指针. enable_from_this 的使用与实现原理说明: shared_from_this()是enable_shared_fr ...

  3. simple 单例

    Message* Message::m_pInstance = ;//类外初始 Message::Message() { } Message::~Message() { ) { delete Inst ...

  4. Can you find it? HDU-2141 (二分查找模版题)

    Description Give you three sequences of numbers A, B, C, then we give you a number X. Now you need t ...

  5. 【JZOJ3215】【SDOI2013】费用流

    ╰( ̄▽ ̄)╭ 对于一张给定的 运输网络 ,Alice 先确定一个最大流 ,如果有多种解, Alice 可以任选一种: 之后 Bob在每条边上分配单位花费 (单位花费必须是非负实数), 要求所有边的单 ...

  6. vue使用flexible和px2rem实现移动端适配

    首先下载flexible.js和px2rem npm install px2rem-loader 对webpack进行配置.进入build文件夹对utils.js中的postcssLoader做如下修 ...

  7. SQL优化神器 - Tosska SQL Tuning Expert Pro for Oracle

    SQL Tuning Expert Pro for Oracle 是Tosska 公司推出的划时代SQL优化工具.它可以帮助SQL开发人员和DBA: 找到最快的等价SQL: 调整执行计划: 管理SQL ...

  8. CSS3圆环旋转效果

    html结构: <div class="demo"></div> css结构: .demo{ width:250px; height:250px; bord ...

  9. Gradle中的buildScript,gradle wrapper,dependencies等一些基础知识

    就想收藏一篇好文,哈哈,无他 Gradle中的buildScript代码块 - 黄博文 然后记录一些gradle的基础知识: 1.gradle wrapper就是对gradle的封装,可以理解为项目内 ...

  10. Java8中的LocalDateTime工具类

    网上搜索了半天都没有找到Java8的LocalDateTime的工具类,只好自己写了一个,常用功能基本都有.还在用Date的Java同道该换换了. 个人项目地址:https://github.com/ ...