HTML5文件拖放API的知識(shí)點(diǎn)有哪些

這篇“HTML5文件拖放API的知識(shí)點(diǎn)有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“HTML5文件拖放API的知識(shí)點(diǎn)有哪些”文章吧。

    1．文件API

      HTML5提供了一個(gè)操作文件的API，通過(guò)這個(gè)API，使從Web頁(yè)面上訪問(wèn)本地文件系統(tǒng)的相關(guān)處理變得十分簡(jiǎn)單。文件API中主要使用file對(duì)象與FileReader接口。在HTML 5中，file對(duì)象代表客戶端計(jì)算機(jī)中的一個(gè)文件，該對(duì)象具有兩個(gè)屬性，name屬性表示文件名（不包括路徑）lastModifiedDate屬性表示文件的最后修改日期。

      在HTML 5中，可以使用FileReader接口把文件讀入內(nèi)存，并且讀取文件中數(shù)據(jù)。 FileReader接口擁有4個(gè)方法，其申3個(gè)用于讀取文件，另一個(gè)用于將讀取過(guò)程中斷。

      下表中列出了這4個(gè)方法以及它們的參數(shù)和功能。需要注意的是：無(wú)論讀取成功或失敗，結(jié)果并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在result屬性中。

       leReader接口的方法：

┏━━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━━━━━┓

┃            方法名             ┃              參數(shù)          ┃                    描述                  ┃

┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫

┃readAsBinaryString      ┃     file                       ┃    將文件讀取為二進(jìn)制碼      ┃

┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫

┃    rcadAsTcxt              ┃file, [encoding]         ┃    將文件讀取為文本              ┃

┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫

┃readAsDataURL           ┃    file                        ┃    將文件讀取為DataURL       ┃

┣━━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━━━━━┫

┃    abort                       ┃    ( none)                ┃    中斷讀取操作                    ┃

┗━━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━━━━━┛

口readAsBinaryString：這個(gè)方法將文件讀取為二進(jìn)制字符串，將該字符串傳送到后端，后端可以通過(guò)這段字符串存儲(chǔ)文件。

口rcadAsText：此方法有兩個(gè)參數(shù)，其中第二個(gè)參數(shù)是文本的編碼方式，默認(rèn)值UTF-8。將文件以文本方式讀取，讀取的結(jié)果就是是這個(gè)文本。

口readAsDataURL：此方法將文件讀取為一串Data URL字符串。（此方法通常將圖像與 HTML等格式的文件以一種特殊格式的URL地址形式直接讀入頁(yè)面）。

    除了以上方法之外，F(xiàn)ileReader接口還包含用于捕獲讀取文件時(shí)的狀態(tài)的事件，如下表。

   FileReader接口的事件：

┏━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━┓

┃          事件           ┃                               描述                                ┃

┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    onabon            ┃    數(shù)據(jù)讀取中斷時(shí)觸發(fā)                                   ┃

┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    onerror            ┃    數(shù)據(jù)讀取出錯(cuò)時(shí)觸發(fā)                                   ┃

┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    onloadstart       ┃    數(shù)據(jù)讀取開(kāi)始時(shí)觸發(fā)                                  ┃

┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    onprogress       ┃    數(shù)據(jù)讀取中                                                ┃

┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    onload              ┃    數(shù)據(jù)讀取成功完成時(shí)觸發(fā)                           ┃

┣━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    onloadend        ┃    數(shù)據(jù)讀取完成時(shí)觸發(fā)，無(wú)論成功或失敗       ┃

┗━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━┛

    2．拖放API

      HTML 5提供了支持拖放操作的API，在HTML 5之前我們已經(jīng)可以使用mousedown、mousemove和mouseup來(lái)實(shí)現(xiàn)拖放操作，但是這些事件只支持在瀏覽器內(nèi)部的拖放，而HTML 5可以支持瀏覽器與其他應(yīng)用程序之間的數(shù)據(jù)的互相拖動(dòng)。

      HTML5中實(shí)現(xiàn)文件拖放的步驟：

    1)將要拖放的對(duì)象元素的draggable屬性設(shè)為true(draggable=¨true¨)，這樣才能對(duì)該元素進(jìn)行拖放。另外，默認(rèn)允許拖放img元素與a元素(必須指定href)

    2)編寫(xiě)與拖放有關(guān)的事件處理代碼。拖放相關(guān)的事件如下表。

    拖放的相關(guān)事件：

┏━━━━━━━┳━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━┓

┃    事件             ┃    產(chǎn)生事件的元素                        ┃                               描述                                ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    dragstart      ┃    披拖放的元素                            ┃                         開(kāi)始拖放操作                        ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    drag              ┃    被拖放的元素                           ┃                          拖放過(guò)程中                          ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    dragcnter      ┃    拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素       ┃   被拖放的元素開(kāi)始進(jìn)入本元素的范圈內(nèi)      ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    dragover      ┃    拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素       ┃    被拖放的元素正在本元素范圈內(nèi)移動(dòng)          ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    dragleave     ┃    拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素       ┃    被拖放的元素離開(kāi)本元素的范圍                 ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    drop             ┃    拖放的目標(biāo)元素                        ┃    有其他元素棱拖放到了本元素中                 ┃

┣━━━━━━━╋━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━┫

┃    dragend        ┃    拖放的對(duì)象元素                        ┃    拖放操作結(jié)束                                             ┃

┗━━━━━━━┻━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━┛

      另外，拖放API中還有一個(gè)DataTransfer對(duì)象，該對(duì)象用來(lái)保存拖放時(shí)所要攜帶的數(shù)據(jù)。我們可以使用該對(duì)象的files[0]屬性來(lái)引用被拖動(dòng)到文件預(yù)覽區(qū)域中的文件。var   file   -   ev . dataTransfer. files [O];

以上就是關(guān)于“HTML5文件拖放API的知識(shí)點(diǎn)有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。