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

創新互聯建站專注于桑植企業網站建設,響應式網站建設,購物商城網站建設。桑植網站建設公司,為桑植等地區提供建站服務。全流程按需求定制開發，專業設計，全程項目跟蹤，創新互聯建站專業和態度為您提供的服務

    1．文件API

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

      在HTML 5中，可以使用FileReader接口把文件讀入內存，并且讀取文件中數據。 FileReader接口擁有4個方法，其申3個用于讀取文件，另一個用于將讀取過程中斷。

      下表中列出了這4個方法以及它們的參數和功能。需要注意的是：無論讀取成功或失敗，結果并不會返回讀取結果，這一結果存儲在result屬性中。

       leReader接口的方法：

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

┃            方法名             ┃              參數          ┃                    描述                  ┃

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

┃readAsBinaryString      ┃     file                       ┃    將文件讀取為二進制碼      ┃

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

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

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

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

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

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

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

口readAsBinaryString：這個方法將文件讀取為二進制字符串，將該字符串傳送到后端，后端可以通過這段字符串存儲文件。

口rcadAsText：此方法有兩個參數，其中第二個參數是文本的編碼方式，默認值UTF-8。將文件以文本方式讀取，讀取的結果就是是這個文本。

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

    除了以上方法之外，FileReader接口還包含用于捕獲讀取文件時的狀態的事件，如下表。

   FileReader接口的事件：

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

┃          事件           ┃                               描述                                ┃

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

┃    onabon            ┃    數據讀取中斷時觸發                                   ┃

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

┃    onerror            ┃    數據讀取出錯時觸發                                   ┃

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

┃    onloadstart       ┃    數據讀取開始時觸發                                  ┃

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

┃    onprogress       ┃    數據讀取中                                                ┃

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

┃    onload              ┃    數據讀取成功完成時觸發                           ┃

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

┃    onloadend        ┃    數據讀取完成時觸發，無論成功或失敗       ┃

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

    2．拖放API

      HTML 5提供了支持拖放操作的API，在HTML 5之前我們已經可以使用mousedown、mousemove和mouseup來實現拖放操作，但是這些事件只支持在瀏覽器內部的拖放，而HTML 5可以支持瀏覽器與其他應用程序之間的數據的互相拖動。

      HTML5中實現文件拖放的步驟：

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

    2)編寫與拖放有關的事件處理代碼。拖放相關的事件如下表。

    拖放的相關事件：

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

┃    事件             ┃    產生事件的元素                        ┃                               描述                                ┃

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

┃    dragstart      ┃    披拖放的元素                            ┃                         開始拖放操作                        ┃

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

┃    drag              ┃    被拖放的元素                           ┃                          拖放過程中                          ┃

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

┃    dragcnter      ┃    拖放過程中鼠標經過的元素       ┃   被拖放的元素開始進入本元素的范圈內      ┃

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

┃    dragover      ┃    拖放過程中鼠標經過的元素       ┃    被拖放的元素正在本元素范圈內移動          ┃

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

┃    dragleave     ┃    拖放過程中鼠標經過的元素       ┃    被拖放的元素離開本元素的范圍                 ┃

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

┃    drop             ┃    拖放的目標元素                        ┃    有其他元素棱拖放到了本元素中                 ┃

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

┃    dragend        ┃    拖放的對象元素                        ┃    拖放操作結束                                             ┃

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

      另外，拖放API中還有一個DataTransfer對象，該對象用來保存拖放時所要攜帶的數據。我們可以使用該對象的files[0]屬性來引用被拖動到文件預覽區域中的文件。var   file   -   ev . dataTransfer. files [O];

以上就是關于“HTML5文件拖放API的知識點有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創新互聯行業資訊頻道。