With Safari 5/Firefox 4, it’s easiest to use the FormData
class:
var data =newFormData(); jQuery.each($('#file')[0].files,function(i, file){ data.append('file-'+i, file);});
So now you have a FormData
object, ready to be sent along with the XMLHttpRequest.
$.ajax({ url:'php/upload.php', data: data, cache:false, contentType:false, processData:false, type:'POST', success:function(data){ alert(data);}});
It’s imperative that you set the contentType
option to false
, forcing jQuery not to add a Content-Type
header for you, otherwise, the boundary string will be missing from it. Also, you must leave the processData
flag set to false, otherwise, jQuery will try to convert your FormData
into a string, which will fail.
You may now retrieve the file in PHP using:
$_FILES['file-0']
(There is only one file, file-0
, unless you specified the multiple
attribute on your file input, in which case, the numbers will increment with each file.)
FormData
XMLHttpRequest Level 2添加了一个新的接口FormData
.利用FormData对象
,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()
方法来异步的提交这个"表单".比起普通的ajax,使用FormData
的最大优点就是我们可以异步上传一个二进制文件.
想要更详细的了解如何使用FormData
对象, 请查看使用FormData对象.
构造函数
new FormData (optional HTMLFormElement form)
参数
- (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.
form
方法
append()
给当前FormData对象添加一个键/值对
.
new FormData (optional HTMLFormElement form)
参数值
- 字段名称.
- 字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
-
(可选) 指定文件的文件名,当
value
参数被指定为一个Blob
对象或者一个File
对象时,该文件名会被发送到服务器上,对于Blob
对象来说,这个值默认为"blob".
name
value
filename
注:如果你将一个Blob
对象作为字段值添加到一个FormData
对象中,则在使用Ajax将这个FormData
对象提交到服务器上时,提交数据中代表对应文件的文件名的"Content-Disposition"字段的值可能会因浏览器的不同而不同,规范中规定为"blob",Gecko早期实现版本中为空字符串,查看下面的Gecko附注.
浏览器兼容性
Gecko附注
在Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前,如果你将Blob
对象作为数据添加到一个FormData
对象中,则在使用Ajax将这个FormData
对象提交到服务器上时,所发送的HTTP请求头中代表那个Blob
对象所包含文件的文件名称的"Content-Disposition"请求头的值会是一个空字符串,这会引发某些服务器程序上的错误.从Gecko 7.0开始,这种情况下发送的文件名称改为"blob"这个字符串.