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