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 ...
随机推荐
- ZAP笔记
1.HTTP自动变成HTTS问题. 在使用OWASP ZAP 2.8.0的时候,如果设置了dynamic ssl certificates,并把正式导入到浏览器的时候 如果ZAP当做代理访问HTTP的 ...
- JVM(二),Java怎样实现一次编译到处运行(平台无关性)
二.Java怎样实现一次编译到处运行(平台无关性) 1.java平台无关性原理 Java源码首先被编译成字节码,再由不同平台的JVM进行解析,JAVA语言在不同的平台上运行时不需要进行重新编译,Jav ...
- 数据结构图之三(最短路径--迪杰斯特拉算法——转载自i=i++
数据结构图之三(最短路径--迪杰斯特拉算法) [1]最短路径 最短路径?别乱想哈,其实就是字面意思,一个带边值的图中从某一个顶点到另外一个顶点的最短路径. 官方定义:对于内网图而言,最短路径是指两 ...
- AcWing:141. 周期(KMP)
一个字符串的前缀是从第一个字符开始的连续若干个字符,例如”abaab”共有5个前缀,分别是a, ab, aba, abaa, abaab. 我们希望知道一个N位字符串S的前缀是否具有循环节. 换言之, ...
- JavaWeb-SpringBoot(抖音)_一、抖音项目制作
JavaWeb-SpringBoot(抖音)_一.抖音项目制作 传送门 JavaWeb-SpringBoot(抖音)_二.服务器间通讯 传送门 JavaWeb-SpringBoot(抖音)_三.抖音项 ...
- linux内核中的数据结构
http://vinllen.com/linuxnei-he-zhong-de-shu-ju-jie-gou/ https://zhuanlan.zhihu.com/p/58087261 https: ...
- a标签的伪类
a 超链接 伪类:给元素添加特殊的效果 :link 未访问过的链接初始颜色 :visited 访问过后的链接颜色 :hover 鼠标移入(悬停)时的颜色 :active 鼠标按下时链接的颜色 书写时的 ...
- py matplotlib 多个figure同时画多个图以及多个图例多个折线图
图例负号乱码的问题 import numpy as np import matplotlib.pyplot as pltimport matplotlibplt.rcParams['axes.un ...
- Redis Cluster 官方集群搭建指南
安装ruby环境因为官方提供的创建集群的工具是用ruby写的,需要ruby2.2.2+版本支持,ruby安装需要指定openssl. 安装openssl $ wget https://www.open ...
- pyqt5 工具栏文字图片同时显示
import sys from PyQt5.QtWidgets import QMainWindow, QTextEdit, QAction, QApplication from PyQt5.QtGu ...