HTML5文件拖放API的知识点有哪些

这篇“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的知识点有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。