jQuery⽤FormData实现⽂件上传的⽅法
前⾔
我们引⼊jQuery来进⾏异步上传可以获得更好的⽤户体验。⼀⽅⾯，在JavaScript中进⾏异步操作⽐表单更加灵活；另⼀⽅⾯，异步上传也避免了上传⼤⽂件时的页⾯长时间卡死。
crontab用法视频HTML
⼀个type=file的<input>就可以让⽤户来浏览并选择⽂件，⼀般会把输⼊控件放到⼀个<form>中，下⾯的⼀个简单的表单：
<form>
jquery下载文件请求
<input type="file" id="avatar" name="avatar">
<button type="button">保存</button>
</form>
javascript高级程序设计图但为什么我只能选择⼀个⽂件？？给<input>添加⼀个multiple属性就可以多选了！
<input type="file" id="avatar" name="avatar" multiple>
获取⽂件列表
上述的<input>将会拥有⼀个叫files的DOM属性，包含了所选的⽂件列表（Array）。
$('button').click(function(){
var $input = $('#avatar');
// 相当于： $input[0].files, $(0).files
var files = $input.prop('files');
console.log(files);
});
这个Array中的每⼀项都是⼀个File对象，它有下⾯⼏个主要属性：
name: ⽂件名，只读字符串，不包含任何路径信息.
size: ⽂件⼤⼩，单位为字节，只读的64位整数.
type: MIME类型，只读字符串，如果类型未知，则返回空字符串.
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上传⽂件
cottage
这是XMLHttpRequest Level 2提供的FormData对象可以帮助我们进⾏⼆进制⽂件的multipart/form-data编码：
$('button').click(function(){
var files = $('#avatar').prop('files');
var data = new FormData();fopen不能用
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。
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进⾏字符串转换。
兼容性与其他选择
本⽂介绍的jQuery⽂件上传⽅式依赖于FormData对象，这是XMLHttpRequest Level 2接⼝，需要 IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
information短语搭配这意味着对于低版本浏览器只能使⽤直接提交⽂件表单的形式，但提交⼤⽂件表单页⾯会长时间不响应，如果希望在低版本浏览器中解决该问题，就只能使⽤别的⽅式来实现了，⽐如很多⽀持多⽂件和上传进度的Flash插件。
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流。谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。