拖拽外部文件进行读取 1.文件读取
? 通过FileReader对象可以读取本地存储的文件，使用File对象来指定所要读取的文件或数据。其中File对象可以是来自input元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的DataTransfer
(1) FileList对象
? 通过input元素上传文件后得到一个伪数组形式的FileList对象
(2)FileReader对象
? HTML5新增的内建对象，可以读取本地文件内容
实例对象： var reader = new FileReader; 实例方法： readAsDataURL() //以DataURL形式读取文件 事件监听： onload //文件读取完成时调用 属性： result //文件的读取结果 1 2 3 4 5 6 7 8 2.拖拽事件
? 在HTML5规范中，可以通过为元素增加draggable=’true’来设置此元素是否可进行拖拽操作，其中图片、链接默认是开启的
事件监听： ondrag 应用于拖拽元素，整个拖拽过程都会调用 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragend 应用于拖拽元素，当拖拽结束时调用 ondragenter 应用于目标元素，当拖拽元素进入时调用 ondragleave 应用于目标元素，当鼠标离开目标元素时调用 ondragover 应用于目标元素，当停留在目标元素上时调用 ondrop 应用于目标元素，当在目标元素上松开鼠标时调用 1 2 3 4 5 6 7 8 3.实例
拖拽外部文件到当前页面进行解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
box-shadow: 0 0 10px 5px rgba(0,0,0,.8);
border-radius: 10px;
line-height: 400px;
text-align: center;
font-size: 30px;
font-weight: 700;
text-shadow:0 0 5px;
transition:all 1s;
}
.box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">拖拽外部文件至此</div>
<script type="text/javascript">
// 需求：拖拽外部文件到当前页面进行解析
// 获取目标元素
var box = document.querySelector('.box');
// (1)需要解决一旦拖拽外部文件就覆盖掉当前页面的问题
// 解决：给document绑定drop事件
// drop事件默认触发不了，需要在dragover事件里面阻止默认事件
document.ondrop = function(e){
e.preventDefault();
}
// 这个阻止默认事件是为了让drop事件得以触发
document.ondragover = function(e){
e.preventDefault();
}
box.ondragenter = function(){
box.style.boxShadow = '0 0 10px 5px rgba(255,0,0,.8)';
}
box.ondrop = function(e){
// console.log(e);
// 得到拖拽过来的文件
var dataFile = e.dataTransfer.files[0];
// FileReader实例化
var fr = new FileReader();
// 异步读取文件
fr.readAsDataURL(dataFile);
// 读取完毕之后执行
fr.onload = function(){
// 获取得到的结果
var data = fr.result;
var img = document.createElement('img');
img.src = data;
box.innerHTML = '';
box.appendChild(img);
}
}
</script>
</body>
</html>
