原创力文档- 1、本文档共40页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第4章 文件与拖放
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，表格4-2归纳了这些事件。 表4-2 FileReade接口的事件 当fileReader对象读取文件时，会伴随着一系列事件，它们表示读取文件时不同的读取状态。 4.2.5 FileReader对象中的事件 事件 描述 onabort 中断时触发 onerror 出错时触发 onload 文件读取成功完成时触发 onloadend 读取完成触发，无论成功或失败 onloadstart 读取开始时触发 onprogress 读取中 【例4-6】 在本例中通过单击“浏览”按钮，选择要浏览的文本文件，然后单击“读取文本文件”按钮，文本文件的内容将在页面中显示。本例实现的具体步骤如下。 <!DOCTYPE html><head> <meta charset="UTF-8"> <title>fileReader对象的事件先后顺序</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 拖放的目标元素 有其他元
文档评论（0）