html5 移动设备api,HTML5新增API，移动端Web布局

目录

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

}

}