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 ...
随机推荐
- Android浮窗权限研究(转载)
这篇博客主要介绍的是 Android 主流各种机型和各种版本的悬浮窗权限适配,但是由于碎片化的问题,所以在适配方面也无法做到完全的主流机型适配,这个需要大家的一起努力,这个博客的名字永远都是一个将来时 ...
- JSP页面的Page指令指定编码和Meta标签编码
JSP代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 如何制作纯净的U盘启动盘
1.去下载**WinPE工具箱**U盘启动盘制作工具 下载地址:http://www.wepe.com.cn/download.html
- spring-boot的三种启动方式
spring-boot的启动方式主要有三种: 1. 运行带有main方法类 2. 通过命令行 java -jar 的方式 3. 通过spring-boot-plugin的方式 一.执行带有main方法 ...
- Mockito 2 让我们校验一些行为
在下面的示例中,我们将会模拟(Mock)一个 List 列表. 这是因为绝大部分的人对列表这个接口比较熟悉(例如 add(), get(), clear() 方法). 在实际情况中,请不要 mock ...
- 灰度图像--图像分割 霍夫变换(Hough Transform)--直线
学习DIP第50天 转载请标明本文出处:http://blog.csdn.net/tonyshengtan ,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:https://gi ...
- 简单快捷的方式从vps下载文件
安装setuptools 1) 最简单安装,假定在ubuntu下 sudo apt-get install python-setuptools SimpleHTTPServer 是单线程的临时服务,建 ...
- EasySwoole 在mac上装虚拟机centos共享mac目录报错处理
[2019-09-26 21:37:09][DEBUG][ERROR] : [listen /media/psf/Home/wwwroot/myobj/easyswoole/Temp/TaskWork ...
- ARTS打卡计划第六周
Algorithms: https://leetcode-cn.com/problems/longest-palindromic-substring/ 中心扩展法首先考虑,当然看到有个动态规划,一直很 ...
- Fastadmin 后台编辑,或者添加的时候,出现的问题
1.情况如图:编辑的时候,这个关联id,默认查出来的是用户昵称,如果要显示用户名,该怎么修改,不要着急,听我慢慢道来 2.首先要找到 编辑页面,检查问题 3.完成