最近工作中需要完成,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. 事务管理(下) 配置spring事务管理的几种方式(声明式事务)

    配置spring事务管理的几种方式(声明式事务) 概要: Spring对编程式事务的支持与EJB有很大的区别.不像EJB和Java事务API(Java Transaction API, JTA)耦合在 ...

  2. <mvc:annotation-driven/>与<context:annotation-config/>的区别

    在使用注解的方式配置SSM的时候一般会配置<mvc:annotation-driven/>与<context:annotation-config/>,有时候会对两者的概念有些区 ...

  3. 前端静态资源版本更新与缓存之——gulp自动化添加版本号

    公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...

  4. java数据库连接池技术原理(浅析)

    在执行数据库SQL语句时,我们先要进行数据连接:而每次创建新的数据库的连接要消耗大量的资源,这样,大家就想出了数据库连接池技术.它的原理是,在运行过程中,同时打开着一定数量的数据库连接,形成数据连接池 ...

  5. physx之刚体运动

    [线性速度与角速度] PxRigidBody的速度由线性速度和角速度构成, 可以分别通过setLinearVelocity和setAngularVelocity进行设置.需要注意的是, 刚体的角速度总 ...

  6. Linux FTP的安装与配置

    Linux FTP的安装与配置   ftp安装部分,操作步骤如下: 可以使用yum命令直接安装ftp # yum install vsftpd ftp服务的开启与关闭命令: 开启:# service  ...

  7. 批量转换编码 (gbk -> utf8)

    使用 Notepad++ 批量的转换文件编码:Mass convert a project to UTF-8 using Notepad++ 步骤如下: 1.一般 Noptepad++ 安装完后已经自 ...

  8. oracle 中数据库完全导入导出:cmd命令行模式(转载)

    http://www.3lian.com/edu/2012/12-01/47252.html Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库 ...

  9. VPS/云主机 如何试用远程连接登录主机服务器_

    1.windows主机如何远程登录 点本地电脑开始>运行(或者按"window+R")>输入mstsc点确定 弹出远程连接的框输入IP连接,  如果是VPS,直接输入I ...

  10. 关于小组所要做的APP的想法

    关于小组所要做的app,我们敲定下来是做关于在线做题的app,但是,纯粹的做题目的app我认为并没有什么大的吸引力,尤其是拿手机做题.所以,我们考虑准备在以下几个方面做功夫以增加吸引力.第一,我们的题 ...