最近工作中需要完成,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 ...
随机推荐
-
[译]学习IPython进行交互式计算和数据可视化(六)
第五章:高性能并行计算 一个反复被提及的反对使用Python进行高性能数值计算的言论是这种语言是动态解释型的,速度太慢.一种编译型低级语言,如C,能提供比它快几个数量级的运算速度.我们在第三章--使用 ...
-
CF360B Levko and Array (二分查找+DP)
链接:CF360B 题目: B. Levko and Array time limit per test 2 seconds memory limit per test 256 megabytes i ...
-
轻松学习Linux系统安装篇之fdisk命令行工具的使用
fdisk 的介绍: fdisk 命令是磁盘分区表操作工具:和以前Dos和windows下的分区工具功能一样:fdsik 能划分磁盘成为若干个区,同时也能为每个分区指定分区的文件系统 ...
-
怎么在ubuntu上使用pidgin登陆QQ
1.Ubuntu pidgin安装webqq 首先安装webqq的通讯协议: sudo add-apt-repository ppa:lainme/pidgin-lwqq sudo apt-get u ...
-
使用Javascript限制文本框只允许输入数字
很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩.曾经使用过的方法通过onkeydown事件来控制只允许数字: <input onkeydown=&quo ...
-
ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
-
java.lang.ClassNotFoundException: com.sun.jna.Native
在使用sprng boot加elasticsearch的时候遇到 java.lang.ClassNotFoundException: com.sun.jna.Native,百度之后要我导入 <d ...
-
tolua之wrap文件的原理与使用
什么是wrap文件 每个wrap文件都是对一个c#类的包装,在lua中,通过对wrap类中的函数调用,间接的对c#实例进行操作. wrap类文件生成和使用的总体流程 生成一个wrap文件的流程 这部分 ...
-
20175224 2018-2019-2 《Java程序设计》第八周学习总结
教材学习内容总结 第十五章 泛型与集合框架 泛型 泛型:目的为建立具有类型安全的集合框架. 泛型类声明:class People<E> class 名称<泛型列表> 链表 定义 ...
-
C# 语句中的各种单例模式代码
1.非线程安全(经典模式),但没有考虑线程安全,在多线程时可能会出问题,不过还从没看过出错的现象. /// <summary> /// 单例模式的实现 /// </summary&g ...