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

創(chuàng)新互聯(lián)建站專注于桑植企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)。桑植網(wǎng)站建設(shè)公司,為桑植等地區(qū)提供建站服務(wù)。全流程按需求定制開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

    1．文件API

      HTML5提供了一個(gè)操作文件的API，通過這個(gè)API，使從Web頁面上訪問本地文件系統(tǒng)的相關(guā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è)用于將讀取過程中斷。

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

       leReader接口的方法：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   FileReader接口的事件：

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

┃          事件           ┃                               描述                                ┃

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

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

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

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

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

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

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

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

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

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

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

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

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

    2．拖放API

      HTML 5提供了支持拖放操作的API，在HTML 5之前我們已經(jīng)可以使用mousedown、mousemove和mouseup來實(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)編寫與拖放有關(guān)的事件處理代碼。拖放相關(guān)的事件如下表。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      另外，拖放API中還有一個(gè)DataTransfer對(duì)象，該對(duì)象用來保存拖放時(shí)所要攜帶的數(shù)據(jù)。我們可以使用該對(duì)象的files[0]屬性來引用被拖動(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：HTML5文件拖放API的知識(shí)點(diǎn)有哪些
分享網(wǎng)址：http://aaarwkj.com/article0/jjgpio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站收錄、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)