错误处理方案
产生错误的原因
相关人员使用 FileReader 接口可以快速、方便地实现对文件的读取，但是，在读取文件的过程中，可能会由于各种原因而出现各种类型的错误和异常。这些原因可能有多个方面的，因此，如下总结出了一些常见的因素。
- 访问某个文件的过程中，该文件被移动或者删除，或者被其它应用程序修改，这种情况非常常见
- 由于权限原因，无法读取文件的数据信息
- 文件出于案例因素的考虑，在读取文件时返回一个无效的数据信息
- 读取文件太大，超出 URL 网址的限制，将无法返回一个有效的数据信息
- 在读取文件的过程中，应用程序本身触发了中止读取的事件
FileError 接口
| 错误代码 | 错误常量 | 说明 |
|---|---|---|
| 1 | NOT_FOUND_ERR | 无法找到文件或者原文件已经被修改 |
| 2 | SECURITY_ERR | 由于安全考虑，无法读取文件数据 |
| 3 | ABORT_ERR | 由 abort 事件触发的中止读取过程 |
| 4 | NOT_READABLE_ERR | 由于权限原因，不能读取文件数据 |
| 5 | ENCODING_ERR | 读取的文件太大，超出读取的地址限制 |
文件拖放 API 和常用对象
| 事件 | 额 |
|---|---|
| dragstart | 开始执行拖放操作，应用于被拖放元素 |
| drag | 拖放过程中，应用于被拖放元素 |
| dragenter | 被拖放的元素开始进入本元素的范围内，应用于拖放过程中鼠标经过的元素 |
| dragover | 被拖放的元素正在本元素范围内移动，应用于拖放过程中鼠标经过的元素 |
| dragleave | 被拖放的元素离开本元素的范围，应用于拖放过程中鼠标经过的元素 |
| drop | 有其它元素被拖放到了本元素中，应用于拖放的目标元素 |
| dragend | 拖放操作结束，应用于拖放的对象元素 |
相关人员可以在 JavaScript 中编写与元素有关的事件代码，但是，在实现文件的拖放功能之前还需要一步，就是将想要拖放的对象的元素的 draggable 属性的值设置为 true ，这表示允许该元素进行拖放。另外， img 元素和 a 元素（必须指定 href 属性）默认情况下允许拖放。
认识 DataTransfer 对象
DataTransfer 对象提供了对于预定义的剪贴板格式的访问，以便在拖放操作中使用，可以通过 event 对象完成这种功能。由于 DataTransfer 是事件对象的属性，所以只能在拖放事件的事件处理程序中访问 DataTransfer 对象。 DataTransfer 对象既可以在源对象中使用，也可以在目标对象中使用。该对象可以包含多个属性和方法，在事件处理程序中，可以使用 DataTransfer 对象的属性和方法来完成拖放功能， HTML 5 也提供了对该对象的支持，并且对其加以扩展。
| 方法 | e |
|---|---|
| getData() | 获取由 setData() 中保存的数据并且进行返回。如果返回的数据不存在，则返回空字符串 |
| setData() | 为元素添加指定的数据。有两个参数，第一个参数是一个字符串，表示保存的数据类型，也是 getData() 方法唯一的一个参数；第二个参数表示数据 |
| clearData() | 清除以特定格式保存的数据。如果未指定格式，则删除当前元素携带的所有数据 |
| addElement() | 为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而影响回调的对象），不会影响拖动操作时页面元素的外观 |
| setDragImage() | 指定一幅图像，当拖动发生时，显示在光标下方。该方法有三个参数，它们分别是要显示的 HTML 元素和光标在图像中的 x 、 y 坐标。其中， HTML 元素可以是一幅图像，也可以是其它元素 |
DataTransfer 对象的属性说明
| 属性 | 额 |
|---|---|
| types | 返回在 dragstart 事件出发时为元素存储数据的格式，如果是外部文件的拖放，则返回 files |
| dropEffect | 返回已选择的拖放效果，即能够获取被拖放的元素能够执行哪种放置行为 |
| effectAllowed | 返回允许执行的拖放操作效果，即表示允许拖放元素的哪种 dropEffect |
dropEffect 属性只有与 effectAllowed 属性搭配时才有用，如果它所设置的效果与 effectAllowed 属性设置的效果不符，则拖放操作失败。
- none ：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值
- move ：应该把拖动的元素移动到放置目标
- copy ：应该把拖动的元素复制到放置目标
- link ：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，存在 URL ）
与 dropEffect 属性相比， effectAllowed 属性的值有多个，除了上面 4 个外，还包含其它的值。
- none ：被拖动的元素不能有任何行为
- move ：只允许值为" move "的 dropEffect
- copy ：只允许值为" copy "的 dropEffect
- link ：只允许值为" link "的 dropEffect
- linkMove ：允许值为" link "和" move "的 dropEffect
- copyMove ：允许值为" copy "和" link "的 dropEffect
- copyLink ：允许值为" copy "和" link "的 dropEffect
- uninitialized ：没有该被拖动元素放置行为
- all ：允许任意 dropEffect
dropEffect 属性与 effectAllowed 属性的值设置必须合法。
- 如果 effectAllowed 属性设置为 none ，则不允许拖放要拖放的元素
- 如果 dropEffect 属性设置为 none ，则不允许被拖放到目标元素中
- 如果 effectAllowed 属性设置为 all 或不设置，则 dropEffect 属性允许被设置为任何值，并且按其指定的值进行显示
- 如果 effectAllowed 属性设置为具体效果值（不为 none 和 all ）时， dropEffect 属性也设置了具体效果值，则两个值必须完全相等，否则不允许被拖放元素拖放到目标元素中