需要用到  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. Redis 配置连接池,redisTemplate 操作多个db数据库,切换多个db,解决JedisConnectionFactory的设置连接方法过时问题。(转)

    环境 springmvc jdk1.8 maven redis.properties配置文件 #redis setting redis.host=localhost redis.port=6379 r ...

  2. 题解 【NOIP2016】魔法阵

    [NOIP2016]魔法阵 Description 六十年一次的魔法战争就要开始了,大魔法师准备从附近的魔法场中汲取魔法量. 大魔法师有m个魔法物品,编号分别为1,2,...,m.每个物品具有一个魔法 ...

  3. [PWN]fsb with stack frame

    0x00: 格式化字符串漏洞出现的时间很早了,偶然在前一段时间学到了一个其他的利用姿势,通过栈桢结构去利用格式化字符串漏洞. 原文链接:http://phrack.org/issues/59/7.ht ...

  4. codevs 1009 产生数 2002年NOIP全国联赛普及组 x (内附解析w)

                         题目描述 Description 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规 ...

  5. python中reversed()函数的用法

    reversed(a) # 返回一个反转的迭代器 举例 a = [1, 2, 3, 4, 5] b = reversed(a) # b是一个迭代器 # print(list(b)) = [5, 4, ...

  6. JavaWeb_(Hibernate框架)Hibernate中一级缓存

    Hibernate中一级缓存 Hibernate 中的缓存分为一级缓存和二级缓存,这两个级别的缓存都位于持久化层,并且存储的都是数据库数据的备份.其中一级缓存是 Hibernate 的内置缓存,在前面 ...

  7. C++ this指针的理解

    先要理解class的意思.class应该理解为一种类型,象 int,char一样,是用户自定义的类型.虽然比int char这样build-in类型复杂的多,但首先要理解它们一样是类型.用这个类型可以 ...

  8. sql把一段时间分割成周,月,季度,年的时间段

    --本周 select TO_CHAR(CREATE_DATE ,'yyyy-MM-dd')as NEW_DATE , TO_CHAR(trunc(CREATE_DATE, ,'yyyy-MM-dd' ...

  9. 20191114-4 Beta发布用户使用报告

    20191114-4 Beta发布用户使用报告 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10007 组名:胜利点 组 ...

  10. 石川es6课程---18、ES6 复习

    石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...