需要用到  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. ZAP笔记

    1.HTTP自动变成HTTS问题. 在使用OWASP ZAP 2.8.0的时候,如果设置了dynamic ssl certificates,并把正式导入到浏览器的时候 如果ZAP当做代理访问HTTP的 ...

  2. JVM(二),Java怎样实现一次编译到处运行(平台无关性)

    二.Java怎样实现一次编译到处运行(平台无关性) 1.java平台无关性原理 Java源码首先被编译成字节码,再由不同平台的JVM进行解析,JAVA语言在不同的平台上运行时不需要进行重新编译,Jav ...

  3. 数据结构图之三(最短路径--迪杰斯特拉算法——转载自i=i++

    数据结构图之三(最短路径--迪杰斯特拉算法)   [1]最短路径 最短路径?别乱想哈,其实就是字面意思,一个带边值的图中从某一个顶点到另外一个顶点的最短路径. 官方定义:对于内网图而言,最短路径是指两 ...

  4. AcWing:141. 周期(KMP)

    一个字符串的前缀是从第一个字符开始的连续若干个字符,例如”abaab”共有5个前缀,分别是a, ab, aba, abaa, abaab. 我们希望知道一个N位字符串S的前缀是否具有循环节. 换言之, ...

  5. JavaWeb-SpringBoot(抖音)_一、抖音项目制作

    JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...

  6. linux内核中的数据结构

    http://vinllen.com/linuxnei-he-zhong-de-shu-ju-jie-gou/ https://zhuanlan.zhihu.com/p/58087261 https: ...

  7. a标签的伪类

    a 超链接 伪类:给元素添加特殊的效果 :link 未访问过的链接初始颜色 :visited 访问过后的链接颜色 :hover 鼠标移入(悬停)时的颜色 :active 鼠标按下时链接的颜色 书写时的 ...

  8. py matplotlib 多个figure同时画多个图以及多个图例多个折线图

    图例负号乱码的问题 import numpy as np  import matplotlib.pyplot as pltimport  matplotlibplt.rcParams['axes.un ...

  9. Redis Cluster 官方集群搭建指南

    安装ruby环境因为官方提供的创建集群的工具是用ruby写的,需要ruby2.2.2+版本支持,ruby安装需要指定openssl. 安装openssl $ wget https://www.open ...

  10. pyqt5 工具栏文字图片同时显示

    import sys from PyQt5.QtWidgets import QMainWindow, QTextEdit, QAction, QApplication from PyQt5.QtGu ...