ajax提交表单包含文件
需要用到 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提交表单包含文件的更多相关文章
- ajax提交表单,支持文件上传
当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求. 1.表单写 ...
- ajax提交表单包括文件
<script src="${pageContext.request.contextPath}/assets/js/jquery-1.8.3.js"></scri ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- 关于ajax提交表单的一些实例及遇到的问题和解决办法
ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个 ...
- ajax提交表单,包括跳入的坑!
本来今天上午写了一个js执行上下文的一个了解.但是写一大半的时候出去有事,电脑关了啥都没了. 还是让我们进入正题 ajax提交表单,很简单,原生js的代码太复杂,我们就jq的去写. 创建html文件, ...
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
随机推荐
- Redis 配置连接池,redisTemplate 操作多个db数据库,切换多个db,解决JedisConnectionFactory的设置连接方法过时问题。(转)
环境 springmvc jdk1.8 maven redis.properties配置文件 #redis setting redis.host=localhost redis.port=6379 r ...
- 题解 【NOIP2016】魔法阵
[NOIP2016]魔法阵 Description 六十年一次的魔法战争就要开始了,大魔法师准备从附近的魔法场中汲取魔法量. 大魔法师有m个魔法物品,编号分别为1,2,...,m.每个物品具有一个魔法 ...
- [PWN]fsb with stack frame
0x00: 格式化字符串漏洞出现的时间很早了,偶然在前一段时间学到了一个其他的利用姿势,通过栈桢结构去利用格式化字符串漏洞. 原文链接:http://phrack.org/issues/59/7.ht ...
- codevs 1009 产生数 2002年NOIP全国联赛普及组 x (内附解析w)
题目描述 Description 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规 ...
- python中reversed()函数的用法
reversed(a) # 返回一个反转的迭代器 举例 a = [1, 2, 3, 4, 5] b = reversed(a) # b是一个迭代器 # print(list(b)) = [5, 4, ...
- JavaWeb_(Hibernate框架)Hibernate中一级缓存
Hibernate中一级缓存 Hibernate 中的缓存分为一级缓存和二级缓存,这两个级别的缓存都位于持久化层,并且存储的都是数据库数据的备份.其中一级缓存是 Hibernate 的内置缓存,在前面 ...
- C++ this指针的理解
先要理解class的意思.class应该理解为一种类型,象 int,char一样,是用户自定义的类型.虽然比int char这样build-in类型复杂的多,但首先要理解它们一样是类型.用这个类型可以 ...
- sql把一段时间分割成周,月,季度,年的时间段
--本周 select TO_CHAR(CREATE_DATE ,'yyyy-MM-dd')as NEW_DATE , TO_CHAR(trunc(CREATE_DATE, ,'yyyy-MM-dd' ...
- 20191114-4 Beta发布用户使用报告
20191114-4 Beta发布用户使用报告 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10007 组名:胜利点 组 ...
- 石川es6课程---18、ES6 复习
石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...