一 使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax方法上传呢?
1 使用
表单初始化FormData对象方式上传文
HTML代码
upload
javascript代码$.ajax({
url:'/upload',
type:'POST',
cache:false,
data:newFormData($('#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代码varformData=newFormData();
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(){
varff=$('#file')[0].files[0];
varfname=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函数将文件复制到要存放的目录即可。
class.upload.php类库简介
class.upload.php是github上php的一个很方便处理上传文件和图片的一个类,功能很强大,这里不做具体介绍,感兴趣可以自己去了解一下。
如果觉得《php ajax xmlhttpreq 上传文件 get 使用jQuery Ajax异步上传文件方法总结》对你有帮助,请点赞、收藏,并留下你的观点哦!