- 1、本文档共40页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,表格4-2归纳了这些事件。 表4-2 FileReade接口的事件 当fileReader对象读取文件时,会伴随着一系列事件,它们表示读取文件时不同的读取状态。 4.2.5 FileReader对象中的事件 事件 描述 onabort 中断时触发 onerror 出错时触发 onload 文件读取成功完成时触发 onloadend 读取完成触发,无论成功或失败 onloadstart 读取开始时触发 onprogress 读取中 【例4-6】 在本例中通过单击“浏览”按钮,选择要浏览的文本文件,然后单击“读取文本文件”按钮,文本文件的内容将在页面中显示。本例实现的具体步骤如下。 !DOCTYPE htmlhead meta charset=UTF-8 titlefileReader对象的事件先后顺序/title /head script language=javascript var result=document.getElementById(result); var input=document.getElementById(input); if(typeof FileReader==undefined) { result.innerHTML = p class=warn抱歉,你的浏览器不支持 FileReader/p; input.setAttribute( disabled,disabled ); } function readFile() { var file = document.getElementById(file).files[0]; var reader = new FileReader(); reader.onload = function(e) { result.innerHTML = img src=+this.result+ alt=/ alert(load); } reader.onprogress = function(e) alert(progress); } reader.onabort = function(e) { alert(“abort”); reader.onerror = function(e) { alert(error); } reader.onloadstart = function(e) { alert(“loadstart”); reader.onloadend = function(e) alert(loadend); reader.readAsDataURL(file); /script p label请选择一个图像文件:/label input type=file id=file / input type=button value=显示图像 onclick=readFile() / /p div name=result id=result !-- 这里用来显示读取结果 -- 在这个实例中,通过点击显示图像按钮在画面中读入一个图像文件,通过这个过程可以了解按顺序触发了哪些事件,并用提示信息的形式报出这些事件的名字。 4.3 拖放API的使用 4.3.1 实现拖放的步骤 4.3.2 拖放实例 在HTML5中要想实现拖放操作,至少要经过如下两个步骤: (1)、将想要拖放的对象元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放。另外,img元素与a元素(必须指定href),默认允许拖放。 (2)、编写与拖放有关的事件处理代码。关于拖放存在如表4-3所示的几个事件: 表4-3 FileReade接口的事件 4.3.1 实现拖放的步骤 事件 产生事件的元素 描述 dragstart 被拖放的元素 开始拖放操作 drag 被拖放的元素 拖放过程中 dragenter 拖放过程中鼠标经过的元素 被拖放的元素开始进入本元素的范围内 dragover 拖放过程中鼠标经过的元素 被拖放的元素正在本元素范围内移动 dragleave 拖放过程中鼠标经过的元素 被拖放的元素离开本元素的范围 drop 拖放的目标元素 有其他元素被拖放到了本元素中 dragend 拖放的目标元素 拖放操作结束 【例4-7】 下面按照上面的步骤实现一个拖放实例。在该实例中,有一个显示“拖放”文字的div元素,可以
您可能关注的文档
- 第3章 嵌入式硬件 S3C2410A.ppt
- 第3章 劳动力供给模型扩展.ppt
- 第3周 水溶性维生素.ppt
- 第3章 发动机的换气过程.ppt
- 第3章 总线和主板.ppt
- 第3章 指令系统100919.ppt
- 第3章 交流电路思考题.ppt
- 第3章 信号发生器1.ppt
- 第3章 信号发生器4.ppt
- 第3章 数据分布特征的描述.ppt
- 2024年05月山东交通职业学院招考聘用博士研究生50人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月安徽芜湖市弋江区老年学校(大学)工作人员特设岗位公开招聘2人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东东营河口区教育类事业单位招考聘用22人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东交通职业学院招考聘用100人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东威海职业学院招考聘用高层次人才2人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月安徽石台县事业单位工作人员33人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东滨州市博兴县事业单位公开招聘考察笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月安徽蚌埠固镇县湖沟镇选聘村级后备干部7人笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东省安丘市教育和体育局所属事业单位学校公开2024年招考232名工作人员笔试历年典型题及考点剖析附带答案含详解.docx
- 2024年05月山东临沂临港经济开发区工作人员(5人)笔试历年典型题及考点剖析附带答案含详解.docx
文档评论(0)