H5的FormData对象完成ajax上传文件multiFile
最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的;
于是寻找了许久,发现了H5 的一个对象FormData
使用方法如下:
HTML:
<form id="myForm" enctype="multipart/form-data">
<input type="hidden" name="name" value="马三" />
<input type="hidden" name="age" value="25" />
<input type="file" name="myfile" />
</form>
ajax:
var data = new FormData($('#myForm')[0]);
$("#myForm").ajaxForm({
type:"post",
url:url,
data:data,
success:function(data){
console.log("SUCCESS");
},
error:function(){
console.log("Failed");
}
})
注意事项:1.上传文件请在form增加属性 enctype="multipart/form-data",form表单默认编码不允许上传文件,增加此属性才行。
H5的FormData对象完成ajax上传文件multiFile的更多相关文章
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- (转)通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- Ajax 上传文件(input file FormData)
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
- models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...
随机推荐
- SQLServer的数据存储结构01 文件与文件组
在SQLServer中,每当新建一个数据库时,则会有一组相应的SQLServer文件被创建,这些单独的SQLServer文件构成的总体称为文件组. 一个数据库对应着一个文件组,在这个文件组里,会包括三 ...
- 后缀树(suffix tree)
参考: 从前缀树谈到后缀树 后缀树 Suffix Tree-后缀树 字典树(trie树).后缀树 一.前缀树 简述:又名单词查找树,tries树,一种多路树形结构,常用来操作字符串(但不限于字符串), ...
- ActiveReports 11 新特性速递
又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...
- Python anaconda links to GOMP_4.0 and throws error
ImportError: /usr/progtools/anaconda2/bin/../lib/libgomp.so.1: version `GOMP_4.0' not found (require ...
- 解决 笔记本键盘打字母却跳出数字来,每次都要按一遍Fn+Num LK 的问题
方法一. 开始-运行,输入“Regedit"命令进入注册表 HKEY_USERS\.DEFAULT\Control Panel\Keyboard 将 InitialKeyboardIndic ...
- shell算数运算
((i=$j+$k)) 等价于 i=`expr $j + $k`((i=$j-$k)) 等价于 i=`expr $j -$k`((i=$j*$k)) 等价于 i=`exp ...
- uva 10934(dp)
题意:k个水球,现在在一个n层建筑物上,水球可能在某一层层以上扔下去会破掉,现在求一个最少的次数使得用这k个水球能确定出哪一层. 思路:假设有i个小球,还可以实验j次时,第一个小球从x处扔下去,如果破 ...
- docker --命令
1.开启服务 sudo docker start 服务名 2.预览列出所有的容器 sudo docker ps -a 3.进入文件 cd 4.预览文件目录 ls 5.预览文件内容 more 6.拷贝文 ...
- angularJs,ionic字符串操作
1.首先我们需要把一段"文本或字符串"中的我们想进行操作的"字符串","字"筛选出来,代码如下: app.filter('replaceCo ...
- tcpdump 获取http请求url
There are tcpdump filters for HTTP GET & HTTP POST (or for both plus message body): Run man tcpd ...