FormData序列化及file文件上传
表单数据上传
情况一:
一、当表单文件处于无任何处理状态时,用submit提交直接上传; 但这种方式上传,数据无任何处理;(极少使用);
但是传统的表单提交会导致页面刷新,但是有些情况下,我们并不希望页面被刷新,这种时候,我们都是使用ajax的方法进行请求的
情况二:
二、当表单文件使用$.ajax上传,表单中无file文件上传时,数据要进行序列化处理,要将表单中的数据转为json数据格式
1、序列化serialize()方法 重点内容
格式:var data=$("#formid").serialize();,其中formid为表单id
功能:将表单内容序列化成一个json结构的对象,注意不是json字符串。
比如,[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name
这样在ajax提交表单数据的时候,就不用一一列举出每一个参数。主需要将data参数设置为 $("#formid").serialize() 即可。
例子:
<form id="submit_form">
<input type="text" name="text" value="姓名"/>
<pre name="code" class="html">
<input type="url" name="url" value="网址"/>
<input type="email" name="email" value="电子邮件"/>
<input type="button" value="submit"id="submit" />
</form> //提交方法
var formData=$("#submit_form").serialize();
$.ajax({
type : 'POST',
url : url地址,
data : formData,或者data:{$("#submit_form").serialize()},或者单个的参数data:{name:'value'}
async : false,
cache : false,
contentType : false,
processData : false,
success : function(data) {
//关闭弹框
alert("成功");
},
error : function(data) {
alert("error!");
}
});
//序列化表单对象
注意:通过$("#submit_form").serialize();可以对表单进行序列化,从而将form表单中的所有参数传递到服务端。但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。
情况三
二、当表单文件使用$.ajax上传,表单中有file文件上传时,表单序列化将无法传递文件流。不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用ajax进行文件上传了。
1、FormData方法介绍
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
参见:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
先要将表单序列化 定义一个变量存储并处理表单
例子:
<form enctype="multipart/form-data" method="post" id="表单ID">
var formdata=new FormData($("#表单ID")[0]);
$.ajax({
url : url,
type : 'POST',
data : formData,
async : false,
cache : false,
contentType : false,
processData : false,
success : function(data) {
//上传成功
alert("成功");
},
error : function(data) {
alert("添加失败!");
}
});
//序列化表单对象
参见:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
使用FormData,进行Ajax请求并上传文件
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本
FormData序列化及file文件上传的更多相关文章
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- 更改file文件上传默认CSS样式
前言: 多数时候我们需要表单上传文件,如图片.但是浏览器默认的input[file]样式很不友好, 需要我们自己手动修改. 如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维. & ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)
一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- PHP 多input file文件上传
前台html jquery代码 后台PHP处理 前台html <form id="form" method="post" enctype="mu ...
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...
随机推荐
- pickle 继承
1.什么是方法,什么是函数 class Foo: def chi(self): print("我是吃") @staticmethod def static_method(): pa ...
- MFC中处理UI界面时的注意点
最近开发时,在处理界面上遇到了下面的问题: 上位机与下位机通信时,如果出现超时,弹出MessageBox提示的情况下,更新界面上的CStatic控件会出现重影. 经过调查发现 原因是由于在UI线程中处 ...
- Python自动化开发 - 网络编程
本节内容 1.客户端/服务器架构 2.OSI七层 3.socket层 4.socket是什么 5.套接字发展史及分类 6.套接字工作流程 一.客户端/服务器架构 即Client/Server架构,包括 ...
- 深拷贝&浅拷贝&引用计数&写时拷贝
(1).浅拷贝: class String { public: String(const char* str="") :_str(]) { strcpy(_str,str); } ...
- 2.Handler处理器 和 自定义Opener
Handler处理器 和 自定义Opener opener是 urllib2.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就是模块帮我们构 ...
- 关于tableview下拉刷新崩溃的问题
逻辑应该是这样的:1. 下拉2. 达到下拉临界值以后再请求网络数据3. 待数据加载到本地以后才更新 data source4. reload tableview 如果先清空再下拉,后果就是往下拉的距离 ...
- python--求参赛两队所有可能的比赛组合情况
朋友遇到一个面试题,让我帮忙实现,题目如下: 红队有A1,B1,C1三名队员,蓝队有A2,B2,C2三名队员,每轮比赛各队出一名队员参加,一名队员只能参加一次比赛,假设A1不会和B2打,B1不会和B2 ...
- ajax调用WebMethed返回处理请求时出错
ajax post调用WebMethed报错,返回的信息如下: {“Message”:“处理请求时出错”,“StackTrace”:“”,“ExceptionType”:“”} 查了一下WebMeth ...
- solr 加载 停用/扩展词典
startup.bat 停止词典的效果
- USACO December 铂金Maxflow
USACO 2015 December Contest, Platinum Problem 1. Max Flow Farmer John has installed a new system of ...