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 ...
随机推荐
- 转:最近5年133个Java面试问题列表
最近5年133个Java面试问题列表 Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来 ...
- 表单提交与后台PHP如何接口?
在网页中,常常有这样那样的表单需要提交,比如登陆,比如注册,比如查询,比如填写问卷.在这样的表单提交过程中,我们究竟向后台提交了什么,是以什么形式提交的,是一个很值得探讨的问题. 提交了什么——就是我 ...
- RDLC开发笔记
1.当报表中使用FormatPercent求百分数时,若分母有小数,务必使用CDbl将其转为double类型,否则会报“错误号”.
- 20145218&20145240 《信息安全系统设计基础》实验三 实时系统的移植
课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)刘士嘉 张晓涵 学号:(按贡献大小排名)20145240 20145218 指导教师:娄嘉鹏 实验日期:2016.11.17 实验时 ...
- 改造laravel的登录流程,仅使用一个token登录laravel
背景:最近使用lavavel来改造目前的系统,但是之前的老系统还不能立马下线,这时就出现了双系统共存的状态,需要解决的一个问题就是一次登录2个系统. 第一步 修改中间件App\Http\Middlew ...
- 不在折腾---storm-0.9.2-incubating分布式安装
安装一个zookeeper集群 > 请参考:不在折腾----zookeeper-3.4.5 上传strom的安装包 解压 配置,conf/storm.yaml * 所使用的zookeeper集群 ...
- [iOS]浅谈NSRunloop工作原理和相关应用
一. 认识NSRunloop 1.1 NSRunloop与程序运行 那么具体什么是NSRunLoop呢?其实NSRunLoop的本质是一个消息机制的处理模式.让我们首先来看一下程序的入口——main ...
- CSS3让一段文字多余的用省略号表示,当鼠标移动上去的时候显示全部文字
<style type="text/css"> div { width:100px; overflow:hidden; white-space:nowrap; text ...
- 单独部署activemq-web-console (转载)
activemq-web-console的默认使用方式是通过在activemq.xml中导入jetty.xml配置一个jetty server来实现的. 其实activemq-web-console完 ...
- CF #296 (Div. 1) B. Clique Problem 贪心(构造)
B. Clique Problem time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...