需要用到  FormData。

html:

<form id="formPost">
  name: <input name="name" />
memo: <input name="memo" />
  file: <input type="file" name="photos[]" />
  file: <input type="file" name="photos[]" />
  file: <input type="file" name="photos[]" />
</form>

js:

let formData = new FormData($('#formPost')[0]);

假如这时候又有一个字段 class 来了

formData.append("class","三年级一班");  // class是键,三年级一班是是值。

查看添加到formData的值

for (let [a, b] of formData.entries()) {
console.log(a, b);
}

打印出来的大概长这样

ajax提交

$.ajax({
url:url,
type: 'post',
data: formData,
processData: false, //告诉jQuery不要去处理发送的数据
contentType: false, //告诉jQuery不要去设置Content-Type请求头
success:function(res){
     console.log(res);
...
}
})

ajax提交表单包含文件的更多相关文章

  1. ajax提交表单,支持文件上传

    当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求.   1.表单写 ...

  2. ajax提交表单包括文件

    <script src="${pageContext.request.contextPath}/assets/js/jquery-1.8.3.js"></scri ...

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

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

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

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

  5. 关于ajax提交表单的一些实例及遇到的问题和解决办法

    ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...

  6. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  7. ajax提交表单,包括跳入的坑!

    本来今天上午写了一个js执行上下文的一个了解.但是写一大半的时候出去有事,电脑关了啥都没了. 还是让我们进入正题 ajax提交表单,很简单,原生js的代码太复杂,我们就jq的去写. 创建html文件, ...

  8. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  9. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

随机推荐

  1. TCP/IP 三次握手和四次挥手

    TCP 三次握手 作用:建立TCP连接 1.三次握手是客户端先发起请求到服务器,此时服务器处于LISTEN监听状态,A会先发送一个连接请求的报文---SYN=1,ACK=0,seq=x ,这个包也称为 ...

  2. 02 Vue介绍与安装,指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  3. 5 LAMP配置管理:模块(state、file、pkg、service)、jinja模板、job管理、redis主从

    1. 配置管理:state和file https://docs.saltstack.com/en/latest/topics/states/index.html Full list of states ...

  4. 富文本编辑器粘贴复制Word

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  5. 一、MySQL一些简述

    概述 数据库(database) : 保存有组织的数据的容器(通常是一个文件或一组文件). 主键(primary key): 唯一标识表中每行的这个列(或这组列)称为主键.主键用表示一个特定的行.没有 ...

  6. react富文本编辑器

    首先安装两个插件 yarn add react-draft-wysiwyg draftjs-to-html --save 使用的代码如下 import React from 'react' impor ...

  7. P1427 小鱼的数字游戏

    输入格式: 一行内输入一串整数,以0结束,以空格间隔. 输出格式: 一行内倒着输出这一串整数,以空格间隔. 直接上代码: #include<iostream> using namespac ...

  8. UCenter网站部署

    搭建LAMP环境部署UCenter LAMP环境: Linux+Apache+mysql+php  用来搭建动态网站或者服务器的开源软件 一.需要安装的软件 [root@tiandong ~]# yu ...

  9. spark-sql cli 参数 及使用

    很难找到spark-sql cli使用的教程,总结下一.启动方法/data/spark-1.4.0-bin-cdh4/bin/spark-sql --master spark://master:707 ...

  10. 邻居子系统 之 邻居表的初始化neigh_table_init

    概述 邻居子系统支持多种实现,例如ARP,ND等,这些实现需要在其初始化的时候,调用neigh_table_init将邻居表项添加到全局邻居子系统数组中,并对实例中的字段(如hash,定时器等)进行相 ...