目录

 

　　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对象

 

　　}

 

　　}