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

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

这篇“HTML5文件拖放API的知识点有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML5文件拖放API的知识点有哪些”文章吧。

1.文件API

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

发布于 2022-03-09 22:51:56
收藏
分享
海报
0 条评论
23
上一篇:HTML5的File API有哪些对象 下一篇:HTML5表单实例分析
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码