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

一 使用FormData对象上传文件

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax方法上传呢?

1 使用<form>表单初始化FormData对象方式上传文

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

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对象,不需要对数据做处理。

  • <form>标签添加enctype="multipart/form-data"属性。

  • cache设置为false,上传文件不需要缓存。

  • contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"。



如果不是用<form>表单构造FormData对象又该怎么做呢?

2 使用FormData对象添加字段方式上传文件

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

这里没有<form>标签,也没有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]中可以看到一个<input type="file">标签能够上传多个文件,只需要在<input type="file">里添加multiple或multiple="multiple"属性。


服务器端读取文件


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


二 构造请求头信息

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

这里没有<form>标签,也没有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函数将文件复制到要存放的目录即可。


class.upload.php类库简介

class.upload.php是github上php的一个很方便处理上传文件和图片的一个类,功能很强大,这里不做具体介绍,感兴趣可以自己去了解一下。


36nu 分享编程知识及经验

已有账号?立即登录
微信公众号
关注36nu微信公众账号
获取最新编程知识及经验