<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#div1{
width: 200px;
height: 200px;
border: 1px dashed #000;
text-align: center;
line-height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
display: none;
}
</style>
<script>
window.onload = function () {
var oDiv=document.querySelector('#div1');
var oT=document.querySelector('#t1');
var timer;
document.οndragοver=function(){
clearTimeout(timer);
oDiv.style.display='block';
timer=setTimeout(function(){
oDiv.style.display='none';
}, 100);
};
oDiv.οndragenter=function(){
oDiv.innerHTML='请释放鼠标';
};
oDiv.οndragleave=function(){
oDiv.innerHTML='请将文件拖着此区域';
};
oDiv.οndragοver=function(){
return false;
};
oDiv.οndrοp=function(ev){
var oFile=ev.dataTransfer.files[0];
var reader=new FileReader();
reader.οnlοad=function(){
// alert(reader.result);
oT.value=this.result;
};
reader.readAsDataURL(oFile); //base64 信息在reader.result身上
return false;
};
};
</script>
</head>
<body>
<textarea id="t1" cols="30" rows="10"></textarea>
<div id="div1">请将文件拖着此区域</div>
</body>
</html>
文件读取
最新推荐文章于 2023-11-13 16:04:28 发布