最近工作中需要完成,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的更多相关文章

  1. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  2. (转)通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  3. Ajax 上传文件(input file FormData)

    FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...

  4. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  5. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  6. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  7. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  8. ajax上传文件及进度显示

    之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...

  9. models渲染字典&form表单上传文件&ajax上传文件

    {# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

随机推荐

  1. SQLServer的数据存储结构01 文件与文件组

    在SQLServer中,每当新建一个数据库时,则会有一组相应的SQLServer文件被创建,这些单独的SQLServer文件构成的总体称为文件组. 一个数据库对应着一个文件组,在这个文件组里,会包括三 ...

  2. 后缀树(suffix tree)

    参考: 从前缀树谈到后缀树 后缀树 Suffix Tree-后缀树 字典树(trie树).后缀树 一.前缀树 简述:又名单词查找树,tries树,一种多路树形结构,常用来操作字符串(但不限于字符串), ...

  3. ActiveReports 11 新特性速递

    又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...

  4. 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 ...

  5. 解决 笔记本键盘打字母却跳出数字来,每次都要按一遍Fn+Num LK 的问题

    方法一. 开始-运行,输入“Regedit"命令进入注册表 HKEY_USERS\.DEFAULT\Control Panel\Keyboard 将 InitialKeyboardIndic ...

  6. shell算数运算

    ((i=$j+$k))    等价于 i=`expr $j + $k`((i=$j-$k))     等价于   i=`expr $j -$k`((i=$j*$k))     等价于   i=`exp ...

  7. uva 10934(dp)

    题意:k个水球,现在在一个n层建筑物上,水球可能在某一层层以上扔下去会破掉,现在求一个最少的次数使得用这k个水球能确定出哪一层. 思路:假设有i个小球,还可以实验j次时,第一个小球从x处扔下去,如果破 ...

  8. docker --命令

    1.开启服务 sudo docker start 服务名 2.预览列出所有的容器 sudo docker ps -a 3.进入文件 cd 4.预览文件目录 ls 5.预览文件内容 more 6.拷贝文 ...

  9. angularJs,ionic字符串操作

    1.首先我们需要把一段"文本或字符串"中的我们想进行操作的"字符串","字"筛选出来,代码如下: app.filter('replaceCo ...

  10. tcpdump 获取http请求url

    There are tcpdump filters for HTTP GET & HTTP POST (or for both plus message body): Run man tcpd ...