html5的api如何使用

本文小编为大家详细介绍“html5的api如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5的api如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　HTML5新增的API的使用

　　window.navigator.onLine检查网络状态（false为未连接，true为已连接）

　　检测网络连接的事件（浏览器的兼容性问题）

　　A、'online'：网络连接

　　B、'offline'：网络断开

　　全屏显示：控制浏览器的全屏显示

　　（具有浏览器的兼容问题）

　　A、webkitRequestFullScreen（）方法：谷歌浏览器实现全屏显示

　　B、webkitCancelFullScreen（）方法：谷歌浏览器关闭全屏显示

　　C、webkitIsFullScreen（）方法：判断谷歌浏览器是否全屏。

　　火狐浏览器前面带moz ?例如：mozRequestFullScreen（）方法

　　IE浏览器前面带ms ? ?例如：msRequestFullScreen（）方法

　　文件读取

　　1、FileReader对象：读取本地文件（文件名、路径）

　　2、File对象：读取文件的内容

　　3、DataTransfer对象：拖放文件的对象

　　浏览器不允许JavaScript直接访问文件系统，使用input表单元素的文件域实现文件的上传。

　　强调1： ?multiple表示选择文件时可以选择多个文件。

　　：会返回一个FileList对象给对象保存在files属性中，可以通过索引的方式访问该对象中的所有元素。

　　FileList对象（文件列表）里面存放的是File对象（文件对象）每个File对象中有三个常用属性：

　　name :文件名？ ? ? ? ? ?size ：文件的大小（以字节为单位）？ ? ? ? type ：文件的类型

　　强调2：onchange事件：当用户选择文件发生改变时触发该事件。

　　4、FileReader的使用方法：

　　a、创建FileReader对象：new FileReader（）

　　b、使用该对象的相关方法来读取文件

　　readAsBinaryString（file）：将文件读取为二进制编码

　　readAsText（file，[encoding]）：将文件读取为文本格式

　　readAsDataURL（）：将文件读取为DataURL方式（通常用来读取图片的缩略图）

　　abort（）：中断读取操作

　　c、访问该对象的result属性得到读取结果

　　d、文件读取的常用事件：

　　onload：读取成功时触发

　　onloadnd：文件读取完成时触发（无论文件读取是否成功都触发）

　　onerror：文件读取错误时触发

　　onabort：文件读取中断时触发

　　实例：

　　//DOM的方法读取文档内容

　　var file = document.querySelector（'input'）

　　var div = document.querySelector（'div'）

　　file.onchange = function（）{ //当文件选择'file'控件发生变化时触发

　　console.log（file.files） //files属性存放的是一个FileList对象（用户选取的文件列表对象

　　//返回的内容含有索引，返回的为文件列表

　　for（var i=0;i

　　console.log（file.files[i].name）

　　}

　　//1.创建FileReader对象

　　var reader = new FileReader（）

　　//2.读取文件为文本格式

　　reader.readAsText（this.files[0]） //读取第一个文件的内容为文本格式

　　//3.注册onload事件，将文件的内容放入div中

　　reader.onload = function（）{

　　div.innerHTML = this.result //this代表的是reader,this是一个DOM对象

　　}

　　}

读到这里，这篇“html5的api如何使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。