从本地磁盘拖拽文件进入html文档中
2017-06-03 本文已影响0人
遇见一只咩
本文实现从本地磁盘直接拖拽文件进html中。
<h4>html代码部分</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
width: 300px;
height: 300px;
border: 10px solid;
margin: 0 auto;
text-align: center;
line-height: 300px;
color: rgb(151,151,151);
font-size: 1.5em;
}
</style>
</head>
<body>
<div id="wrap">
请将上传的文件拖拽进内部
</div>
</body>
<script type="text/javascript">
var wrap = document.querySelector('#wrap');
wrap.ondragenter = function(){
this.style.backgroundColor = 'gray';
}
wrap.ondragover = function(){
return false;
//清理掉标签的dragover默认事件，防止dragover触发时拦截drop事件，直接执行dragend事件。
}
wrap.ondragleave = function(){
this.style.backgroundColor = 'white';
}
wrap.ondrop = function (e){
this.style.backgroundColor = 'white';
var that = this;
//获取到用户拖拽进来的文件信息
var file = e.dataTransfer.files[0];
console.log(file);
//创建文件读取对象
var fileReader = new FileReader();
//给对象绑定load事件函数，当对象把路径下的数据读取完毕后，会触发该函数，从该函数中获取到读取的内容
fileReader.onload = function(e){
console.log('kkkk');
//获取读取出来的图片数据
var data = e.target.result;
// console.log(data)
//把图片数据暂存到浏览器中
that.style.background = 'url('+data+') no-repeat center';
that.innerHTML = ''
}
//让读取对象读取用户拖拽的文件的路径
fileReader.readAsDataURL(file);
return false;
// e.preventDefault();
}
</script>
</html>
