本文小編為大家詳細介紹“html5的api如何使用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“html5的api如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

荔城網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,荔城網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為荔城上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的荔城做網(wǎng)站的公司定做！

　　HTML5新增的API的使用

window.navigator.onLine檢查網(wǎng)絡(luò)狀態(tài)（false為未連接，true為已連接）

檢測網(wǎng)絡(luò)連接的事件（瀏覽器的兼容性問題）

A、'online'：網(wǎng)絡(luò)連接

B、'offline'：網(wǎng)絡(luò)斷開

全屏顯示：控制瀏覽器的全屏顯示

（具有瀏覽器的兼容問題）

A、webkitRequestFullScreen（）方法：谷歌瀏覽器實現(xiàn)全屏顯示

B、webkitCancelFullScreen（）方法：谷歌瀏覽器關(guān)閉全屏顯示

C、webkitIsFullScreen（）方法：判斷谷歌瀏覽器是否全屏。

火狐瀏覽器前面帶moz ?例如：mozRequestFullScreen（）方法

IE瀏覽器前面帶ms ? ?例如：msRequestFullScreen（）方法

文件讀取

1、FileReader對象：讀取本地文件（文件名、路徑）

2、File對象：讀取文件的內(nèi)容

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

瀏覽器不允許JavaScript直接訪問文件系統(tǒng)，使用input表單元素的文件域?qū)崿F(xiàn)文件的上傳。

強調(diào)1： ?multiple表示選擇文件時可以選擇多個文件。

：會返回一個FileList對象給對象保存在files屬性中，可以通過索引的方式訪問該對象中的所有元素。

FileList對象（文件列表）里面存放的是File對象（文件對象）每個File對象中有三個常用屬性：

name :文件名？ ? ? ? ? ?size ：文件的大小（以字節(jié)為單位）？ ? ? ? type ：文件的類型

強調(diào)2：onchange事件：當用戶選擇文件發(fā)生改變時觸發(fā)該事件。

4、FileReader的使用方法：

a、創(chuàng)建FileReader對象：new FileReader（）

b、使用該對象的相關(guān)方法來讀取文件

readAsBinaryString（file）：將文件讀取為二進制編碼

readAsText（file，[encoding]）：將文件讀取為文本格式

readAsDataURL（）：將文件讀取為DataURL方式（通常用來讀取圖片的縮略圖）

abort（）：中斷讀取操作

c、訪問該對象的result屬性得到讀取結(jié)果

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

onload：讀取成功時觸發(fā)

onloadnd：文件讀取完成時觸發(fā)（無論文件讀取是否成功都觸發(fā)）

onerror：文件讀取錯誤時觸發(fā)

onabort：文件讀取中斷時觸發(fā)

實例：

//DOM的方法讀取文檔內(nèi)容

var file = document.querySelector（'input'）

var div = document.querySelector（'div'）

file.onchange = function（）{ //當文件選擇'file'控件發(fā)生變化時觸發(fā)

console.log（file.files） //files屬性存放的是一個FileList對象（用戶選取的文件列表對象

//返回的內(nèi)容含有索引，返回的為文件列表

for（var i=0;i

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

}

//1.創(chuàng)建FileReader對象

var reader = new FileReader（）

//2.讀取文件為文本格式

reader.readAsText（this.files[0]） //讀取第一個文件的內(nèi)容為文本格式

//3.注冊onload事件，將文件的內(nèi)容放入div中

reader.onload = function（）{

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

}

}

讀到這里，這篇“html5的api如何使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。