前端例程：拖动文件到窗口打开
Posted Naisu Xu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端例程：拖动文件到窗口打开相关的知识，希望对你有一定的参考价值。
目的
拖动文件到窗口打开是非常常用的一个功能，这个功能实现非常简单。这里将对该功能进行进行简单的代码演示。
功能演示
上面演示中我将文件拖动到指定区域后文件内容会被显示，而拖动文件到非指定区域时文件会从新标签页打开（这是浏览器的默认行为）。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖动文件到窗口打开</title>
<style>
div {
width: 250px;
height: 100px;
background-color: lightgray;
text-align: center;
line-height: 100px;
}
</style>
<script>
function dragover(event) {
// 元素在目标区域中拖动时持续触发dragover事件（默认约每350ms触发一次）
// dragover事件会比drop先触发
// dragover事件的默认行为是"重置当前的拖拽动作为'none'"
// 所以必须禁用dragover事件的默认行为才能触发drop事件
event.preventDefault();
}
function drop(event) {
// 元素在目标区域上释放触发drop事件
event.preventDefault();
var reader = new FileReader();
reader.onload = function () {
alert(this.result);
};
reader.readAsText(event.dataTransfer.files[0]); // 以文本方式读取拖动对象中的第一个文件
// reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file);
}
</script>
</head>
<body>
<div ondragover="dragover(event)" ondrop="drop(event)">拖动文件到这里打开</div>
</body>
</html>
上面的代码中关键部分都有注释，主要就是获取drop事件中传递的文件而已，而drop事件和dragover事件还有些牵扯，在上面注释中都有详细说明。
上面代码获取文件后只是简单的将文本内容进行显示，实际使用时完全可以根据自己的需求对获取到的文件进行处理。
总结
拖动文件到窗口打开这个功能比较简单，主要就是上面那些内容了。
以上是关于前端例程：拖动文件到窗口打开的主要内容，如果未能解决你的问题，请参考以下文章