拖拽外部文件进行读取
1.文件读取
通过FileReader对象可以读取本地存储的文件,使用File对象来指定所要读取的文件或数据。其中File对象可以是来自input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer
(1) FileList对象
通过input元素上传文件后得到一个伪数组形式的FileList对象
(2)FileReader对象
HTML5新增的内建对象,可以读取本地文件内容
实例对象:
var reader = new FileReader;
实例方法:
readAsDataURL() //以DataURL形式读取文件
事件监听:
onload //文件读取完成时调用
属性:
result //文件的读取结果
2.拖拽事件
在HTML5规范中,可以通过为元素增加draggable=’true’来设置此元素是否可进行拖拽操作,其中图片、链接默认是开启的
事件监听:
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
3.实例
拖拽外部文件到当前页面进行解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta