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

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