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


Posted in Javascript onNovember 21, 2016

前言

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

HTML

一个type=file<input>就可以让用户来浏览并选择文件, 一般会把输入控件放到一个<form>中,下面的一个简单的表单:

<form>
 <input type="file" id="avatar" name="avatar">
 <button type="button">保存</button>
</form>

但为什么我只能选择一个文件??给<input>添加一个multiple属性就可以多选了!

<input type="file" id="avatar" name="avatar" multiple>

获取文件列表

上述的<input>将会拥有一个叫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进行字符串转换。

兼容性与其他选择

本文介绍的jQuery文件上传方式依赖于FormData对象, 这是XMLHttpRequest Level 2接口, 需要 IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

这意味着对于低版本浏览器只能使用直接提交文件表单的形式, 但提交大文件表单页面会长时间不响应,如果希望在低版本浏览器中解决该问题, 就只能使用别的方式来实现了,比如很多支持多文件和上传进度的Flash插件。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
JS监听Esc 键触发事键
Apr 14 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
遍历js中对象的属性和值的实例
Nov 21 #Javascript
JavaScript数据结构链表知识详解
Nov 21 #Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 #Javascript
Node.js测试中的Mock文件系统详解
Nov 21 #Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 #Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 #Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 #Javascript
You might like
php 获取select下拉列表框的值
2010/05/08 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
js资料prototype 属性
2007/03/13 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
理解Python垃圾回收机制
2016/02/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
大专自我鉴定范文
2013/10/23 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
八年级历史教学反思
2014/01/10 职场文书
社团文化节邀请函
2014/01/10 职场文书
明星邀请函
2015/02/02 职场文书
数学教师求职信范文
2015/03/20 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
项目备案申请报告
2015/05/15 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
学困生转化工作总结
2015/08/13 职场文书
如何写好活动总结
2019/06/21 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL