文档章节

HTML5 -- FormData

airmount
 airmount
发布于 2014/06/19 11:08
字数 446
阅读 163
收藏 1

FormData对象是HTML5中新增的一个对象。它能使现在的AJAX交互更加简单。之前的AJAX在上传前,需要将表单的数据序列化,即jQuery中serialize;包括异步上传文件也需要写一大坨“看起来没那么必要 ”的东西。FormData能够简化这些步骤,使AJAX的数据发送变得简单清晰许多 。

FormData有三种用法,一种是创建全新的FormData对象:

1
var formData = new FormData();

一种是获取form表单的FormData对象:

1
2
var form = document.getElementById("form1");
var formData = new FormData(form );

或者通过form的getFormData方法:

1
2
var form = document.getElementById("form1");
var formData = form.getFormData();

获取FormData对象后,还需要向其内部插入数据,目前只能使用append:

1
2
//参数:(name,value);
formData.append("pwd","123456");

当将本地数据添加完毕后,可以通过ajax的send方法传送到服务器。

1
2
3
var xhr = new XMLHttpRequest();
xhr.open('GET'," http://localhost/",true);
xhr.send(formData);

当然FormData并不兼容,这是司徒正美提供的一个兼容的 FormData代码:https://gist.github.com/lemonhall/3120320

FormData在异步上传文件上会更加省事:

1
2
3
4
5
6
7
8
9
10
11
var files = fileInput.files;
var formData = new FormData();
//将所有文件插入formData
for (var i=0; i<files.length; i++) {
    formData.append(fileInput.name, files[i]);
}
             
var xhr = new XMLHttpRequest();
xhr.open('POST'," http://localhost/ajaxload/test.php",true);
//即可上传
xhr.send(formData);

非常简单却非常实用的一个对象。 

本文转载自:http://hi.baidu.com/summer8th/item/35b75bf96397df27753c4c37

共有 人打赏支持
airmount
粉丝 2
博文 2
码字总数 0
作品 0
朝阳
程序员
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
0
0
利用HTML5分片上传超大文件

在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主...

miscellanea
2014/09/22
0
0
Html5 FormData+Ajax表单数据提交

首先来认识一下FormData表单 var formData = new FormData(); formData.append('name', 'zhangsan');formData.append('age', 20);formData.append('gender', 'M');//防止跨域,注意,该字符串......

IamOkay
2014/11/25
0
0
利用FormData实现附件上传(实现上传图片显示)

<script type="text/javascript"> function creatXMLHttpRequest(){ var obj =null; if(window.ActiveObject){ obj = new ActiveObject("Microsoft.XMLHTTP");......

PHer
2014/06/23
0
0
初识html5 File API实现带有进度提示的文件上传

Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipart/form-data,但是需要修改服务器...

miscellanea
2014/06/27
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
0
0
12.17 Nginx负载均衡

Nginx负载均衡 下面的dig看到可以返回2个IP,就是解析出来的IP,这样我们可以做负载均衡。 dig www.qq.com 1.vim /usr/local/nginx/conf/vhost/fuzai.conf 2.添加如下配置 upstream qq //定义...

芬野de博客
今天
0
0
SSE(Server Send Event 服务端发送事件)

package com.example.demo.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframe......

Canaan_
今天
0
0
jvm调优

1.jvm运行模式 client模式:启动快,占用内存少,jit编译器生成代码的速度也更快. server模式:主要优势在于代码优化功能,这个功能对于服务器应用而言尤其重要. tiered server模式:结合了client与...

Funcy1122
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部