第4章 文件与拖放.pptVIP

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元素，可以