使用jQuery Ajax异步上传文件方法总结

[lovecn]

一 使用FormData对象上传文件http://www.36nu.com/post/115.html
FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax方法上传呢？
1 使用

表单初始化FormData对象方式上传文
HTML代码

upload javascript代码 $.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, contentType: false}).done(function(res) { }).fail(function(res) {}); 这里要注意几点： processData设置为false。因为data值是FormData对象，不需要对数据做处理。 标签添加enctype="multipart/form-data"属性。 cache设置为false，上传文件不需要缓存。 contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。 上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为中声明的是name="file"。

如果不是用表单构造FormData对象又该怎么做呢？
2 使用FormData对象添加字段方式上传文件
HTML代码

upload

这里没有标签，也没有enctype="multipart/form-data"属性。 javascript代码 var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); $.ajax({ url: '/upload', type: 'POST', cache: false, data: formData, processData: false, contentType: false}).done(function(res) { }).fail(function(res) {}); 这里有几处不一样： append()的第二个参数应是文件对象，即$('#file')[0].files[0]。 contentType也要设置为‘false’。 从代码$('#file')[0].files[0]中可以看到一个标签能够上传多个文件，只需要在里添加multiple或multiple="multiple"属性。

服务器端读取文件

FormData对象上传文件跟直接提交表单效果一样，按直接提交表单的方式处理就可以了，php可以使用$_FILES来读取文件信息

二 构造请求头信息
HTML代码

upload

这里没有标签，也没有enctype="multipart/form-data"属性。 javascript代码 $(function(){ $("#upload").click(function(){ var ff = $('#file')[0].files[0]; var fname = ff.name; $.ajax({ url: 'upload.php', type: 'POST', cache: false, data: ff, processData: false, headers: { "Cache-Control":"no-cache", "X-Requested-With": "XMLHttpRequest", "X-File-Name":fname } }).done(function(res) { }).fail(function(res) {}); })

})

服务器端读取文件

php可以使用
file_put_contents(‘temp’, file_get_contents('php://input'))
来接收文件，使用
$_SERVER['HTTP_X_FILE_NAME']
来获取文件名，得到扩展名后可以使用copy函数将文件复制到要存放的目录即可。