jQuery用FormData实现文件上传的方法

高洛峰

发布时间：2016-12-06 13:15:11

1959人浏览过

来源于php中文网

原创

前言

我们引入jQuery来进行异步上传可以获得更好的用户体验。一方面，在JavaScript中进行异步操作比表单更加灵活；另一方面，异步上传也避免了上传大文件时的页面长时间卡死。

HTML

一个type=file的就可以让用户来浏览并选择文件，一般会把输入控件放到一个

中，下面的一个简单的表单：

简灰服装商城整站 For SHOPEX

SHOPEX简灰服装商城整站源码下载。安装方法:1.解压上传程序至网站根目录.. 访问:域名/bak.(用户名:admin 密码:123456)2.进入帝国备份王后,配置数据库数据库信息.选择-www.taomoban.net目录.还原数据库.3.修改FTP目录下的config/config.phpphp 数据库连接信息.4.登陆网站后台--清空缓存..5.删除bak文件夹后台:shopadm

下载

但为什么我只能选择一个文件？？给添加一个multiple属性就可以多选了！

获取文件列表

上述的将会拥有一个叫files的DOM属性，包含了所选的文件列表（Array）。

$('button').click(function(){
 var $input = $('#avatar');
 // 相当于： $input[0].files, $input.get(0).files
 var files = $input.prop('files');
 console.log(files);
});

这个Array中的每一项都是一个File对象，它有下面几个主要属性：

name: 文件名,只读字符串,不包含任何路径信息.

size: 文件大小,单位为字节,只读的64位整数.

type: MIME类型,只读字符串,如果类型未知,则返回空字符串.

详情可以参考：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

multipart/form-data

上传文件比较特殊，其内容是二进制数据，而HTTP提供的是基于文本的通信协议。这时需要采用multipart/form-data编码的HTTP表单。

其HTTP消息体格式如下所示：

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="title"
 
harttle
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="avatar"; filename="harttle.png"
Content-Type: image/png
 
 ... content of harttle.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

每个字段由一段boundary string来分隔，浏览器保证该boundary string不与内容重复，因而multipart/form-data能够成功编码二进制数据。

jQuery上传文件

这是XMLHttpRequest Level 2提供的FormData对象可以帮助我们进行二进制文件的 multipart/form-data编码：

$('button').click(function(){
 var files = $('#avatar').prop('files');
 
 var data = new FormData();
 data.append('avatar', files[0]);
 
 $.ajax({
  url: '/api/upload',
  type: 'POST',
  data: data,
  cache: false,
  processData: false,
  contentType: false
 });
});

url, type, data想必做前端的都很熟悉了，介绍其余三个参数：

cache

cache设为false可以禁止浏览器对该URL（以及对应的HTTP方法）的缓存。 jQuery通过为URL添加一个冗余参数来实现。

该方法只对GET和HEAD起作用，然而IE8会缓存之前的GET结果来响应POST请求。这里设置cache: false是为了兼容IE8。

参考：http://api.jquery.com/jquery.ajax/

contentType

jQuery中content-type默认值为application/x-www-form-urlencoded，因此传给data参数的对象会默认被转换为query string（见HTTP 表单编码 enctype）。

我们不需要jQuery做这个转换，否则会破坏掉multipart/form-data的编码格式。因此设置contentType: false来禁止jQuery的转换操作。

processData

jQuery会将data对象转换为字符串来发送HTTP请求，默认情况下会用 application/x-www-form-urlencoded编码来进行转换。我们设置contentType: false后该转换会失败，因此设置processData: false来禁止该转换过程。

我们给的data就是已经用FormData编码好的数据，不需要jQuery进行字符串转换。

兼容性与其他选择