|
FormData的详细介绍及使用 https://developer.mozilla.org/zh ... ng_FormData_Objects
那里对FormData的方法和事件已经表述的非常清楚,这里就不再浪费时间在介绍一遍了。本文主要针对FormData对象的使用以及异步文件上传进行详细的说明。
FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。
一、从头开始创建一个FormData对象
你可以创建一个你自己的FormData对象,然后通过append() 方法向对象中添加键值对,就像下面这样:
注意:字段”userfile” 和 “webmasterfile” 都包含文件(file)。被分配到字段”accountnum”上的数字直接被FormData.append()方法转换成了字符串(字段的值(value)可能是一个Blob, File, 或一个string:如果值既不是Blob也不是File,则值会被转换成一个string)。 这个例子创建了一个FormData实例,其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”,然后使用XMLHttpRequest对象的send()方法去发送表单数据。字段”webmasterfile”是一个Blob。一个Blob对象代表一个文件对象的原始数据。但是Blob代表的数据不必须是javascript原生格式的数据。文件接口是基于Blob,继承Blob功能和扩大它对用户文件系统的支持。为了构建一个Blob可以调用Blob()构造函数。
二、从一个HTML表单获得一个FormData对象
为了获得一个包含已存在表单数据的FormData对象,在创建FormData对象的时候需要指定表单元素。
就像下面这样:
你也可以在获得FormData对象之后增加另外的数据,就像下面这样:
这样你可以在发送之前增加额外的信息,不一定是用户编辑的。
三、使用FormData对象发送文件
你可以使用FormData发送文件。简单的<form>中在包含一个<input>元素就可以:
然后你可以使用下面的代码去发送:
你也可以直接向FormData对象中添加File或Blob,就像下面这样:
当使用append() 方法的时候,可能会使用到第三个参数去发送文件名称(通过Content-Disposition头发送到服务器)。如果没有指定第三个参数或这个参数不被支持的话,第三个参数默认是”blob”。
如果你设置好正确的options,你也可以和jQuery配合起来使用:
|
上一篇:103976个英语单词大全(sql版)下载下一篇:.net/c# 测试服务器运算和IO速度
|