js文件上传中遇到的知识点

JavaScript027

js文件上传中遇到的知识点,第1张

在前端开发中,我们经常遇到上传文件的需求,以前都是用到时再找资料,但总是感觉对这块不熟,最近翻资料学习了一下,记录一下。

本文中涉及的知识点有:FileList对象,Blob对象,File对象,URL对象、FormData对象等。

本文参考 网道 ,总结而来。另外,强烈推荐网道,可以去 网道的官方 看看,是阮一峰大神发起的项目,提供互联网开发文档,文档非常全面易懂。

FileList对象,是一个像数组的对象,拥有length属性和item()方法,同时,它的每一项都是File对象。

input 标签,将type设为file,之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是,blob对象用于操作二进制文件,arraybuffer用于操作内存。

blob 对象拥有2个属性和1个方法,分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外,还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。

拿到File 对象之后就要进行操作,下面是操作。

URL.createObjectURL(file) 允许为File 对象创建一个临时链接,

FileReader 对象的属性和方法比较多,属性中比较重要的是result,方法中比较重要的是

FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。

在早期的互联网时候,提交数据都是用表单。表单提交数据有些缺陷,例如无法校验表单数据,会刷新整个页面等。随着Ajax的兴起,页面表单提交数据慢慢退出历史舞台,但有时上传文件时我们偶尔会用到表单提交数据。

在调用构造函数new FormData(form)构造formdata对象时需要传入form节点,如果不传入,则默认构建空表单。如果传入,则按照key=value的时候构建表单。

可以看看效果图

FormData 对象主要的方法有:

cavas压缩图片其实很简单,无非就是几个步骤:

1、选择图片,判断图片是否大于2M(用File对象的size进行判断,size的单位是字节);

2、用FileReader对象读取文件成base64,

3、然后创建Image对象,赋值src属性,在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小);

4、将cavas转成blob,拼在formdata中用ajax上传。

这篇文章到这里也就结束了,这篇文章包含了一些浏览器中提供的对象,可以看到都是很简单的内容。

js是一个网络用语,意思是:“奸商”。网络用语即多在网络上流行的非正式语言。多为谐音、错别字改成,也有象形字词,以及在论坛上引起流行的经典语录。 网络是由节点和连线构成,表示诸多对象及其相互联系。在数学上,网络是一种图,一般认为专指加权图。网络除了数学定义外,还有具体的物理含义,即网络是从某种相同类型的实际问题中抽象出来的模型。

JS是奸商的简称

2004年华研重点新声 — JS 1999年的GoGo&MeMe蜕变再起飞 哥哥“Justin”妹妹“Sophia” 2004年最受瞩目创作二人组JS JS加盟华研首张专辑 - 遇见未来 华研唱片一年一组强力新人,继张智成、阿桑之后 2004年超猛推出 全创作才华兄妹二人组 — JS:Justin与Sophia ★最抢手的创作新天王 - Justin陈忠义,孙燕姿 The Moment、张智成 凌晨三点钟 等红歌作者,好歌不断众家歌手争相邀歌 ★最具特色的新文艺派歌姬 - Sophia陈绮萱,嗓音独具个性,风格独特 创作才华高人一等音乐性丰富 听觉新刺激 “遇见未来”全专辑全创作一手包办词、曲、编曲、制作、演唱 ◎首波话题主打《杀破狼》中视最新八点档大戏“仙剑奇侠传”全球指定主题曲 ◎第二主打《遇见未来》冠军韩剧“大长今”8月1号起最新片尾曲 上半年F.I.R独领风骚 下半年且看JS大显身手