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 ...
随机推荐
- Juit4 SpringBoot注解
@RunWith就是一个运行器 @RunWith(JUnit4.class)就是指用JUnit4来运行 @RunWith(SpringJUnit4ClassRunner.class),让测试运行于Sp ...
- vue 剪切图片上传头像,使用 cropperjs 实现
我使用的是vue,移动端的项目. 官网地址:cropperjs GitHub地址:https://github.com/fengyuanchen/cropperjs/blob/master/READM ...
- jquery unbind()方法 语法
jquery unbind()方法 语法 作用:unbind() 方法移除被选元素的事件处理程序.该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行.ubind() 适用于任 ...
- 最近公共祖先LCA(Tarjan算法)的思考和算法实现——转载自Vendetta Blogs
LCA 最近公共祖先 Tarjan(离线)算法的基本思路及其算法实现 小广告:METO CODE 安溪一中信息学在线评测系统(OJ) //由于这是第一篇博客..有点瑕疵...比如我把false写成了f ...
- nginx 配置文件 2019-12-20
cat /etc/nginx/nginx.conf user nginx; worker_processes ; error_log /var/log/nginx/error.log warn; p ...
- JavaWeb_(Hibernate框架)Hibernate与c3p0与Dbutils的区别
JavaWeb_(Hibernate框架)使用Hibernate开发用户注册功能 传送门 JavaWeb_(Hibernate框架)使用c3p0与Dbutils开发用户注册功能 传送门 Hiberna ...
- Okhttp源码分析--基本使用流程分析
Okhttp源码分析--基本使用流程分析 一. 使用 同步请求 OkHttpClient okHttpClient=new OkHttpClient(); Request request=new Re ...
- python函数(一)
今天记一下学到的python函数相关知识. 目录: 1.函数简介 2.函数定义 3.函数参数 第一部分:函数简介 我们在编程过程中往往会碰到这样的事情-----很多地方都用到了相同的一段代码.虽 ...
- Android jni/ndk编程一:jni初级认识与实战体验
Android平台很多地方都可以看到jni的身影,比如之前接触到一个投屏的项目,主要的代码是c/c++写的,然后通过Jni供Java层调用;另外,就拿Android系统中的Service来说,很多的S ...
- n个骰子可能的点数和
让后面的点数比前面的大 package touzi; public class Touzi { public static void main(String[] args) { // TODO Aut ...