文件拖拽
ondragover 拖拽文件進入窗口 （不斷執(zhí)行）
ondragenter 拖拽文件進入窗口 （只執(zhí)行一次）
ondragleave 拖拽文件離開窗口
ondrop 文件丟到指定區(qū)域
必須在ondragover事件中阻止默認事件return false;
文件信息
var oF=ev.dataTransfer.files[0];
oF.name 名字
oF.type 類型
oF.size 大小
oF.lastModifiedDate 修改時間
1.創(chuàng)建一個讀取文件對象
var reader=new FileReader();
2.讀取方式
文本方式
reader.readAsText(oF);
base64
reader.readAsDataURL(oF);
3.讀取成功
reader.onload=function (){
reader.result; //讀取結果
};
4.讀取失敗
onerror
5.讀取完成
onloadend
6.開始讀取
onloadstart
7.讀取過程
onprogress
ev.loaded
ev.total
8.讀取中斷
onabort
9.強制中斷
reader.abort();
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文件拖拽</title>
<style>
.box{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px; display:none; text-align:center; line-height:200px; color:#fff; }
</style>
<script>
window.onload=function (){
var oDiv=document.querySelector('.box');
var oPic=document.getElementById('pic');
var oM=document.getElementById('m');
//進入頁面
var timer=null;
document.ondragover=function (){
oDiv.style.display='block';
clearTimeout(timer);
timer=setTimeout(function (){
oDiv.style.display='none';
},300);
};
//文件進入元素
oDiv.ondragenter=function (){
oDiv.innerHTML='釋放鼠標';
};
//文件離開元素
oDiv.ondragleave=function (){
oDiv.innerHTML='將文件拖到此區(qū)域';
};
//文件丟到div上
oDiv.ondrop=function (ev){
//獲取文件信息
var oF=ev.dataTransfer.files[0];
//讀取方式
var reader=new FileReader();
reader.onload=function (){
//alert('讀取成功');
oPic.src=reader.result;
};
reader.error=function (){
alert('讀取失敗');
};
reader.onloadend=function (){
alert('讀取完成');
};
reader.onloadstart=function (){
alert('開始讀取');
};
//正在讀取
reader.onprogress=function (ev){
//當前讀取多少 ev.loaded
//總大小 ev.total
var scale=ev.loaded/ev.total;
if(scale>0.5){
reader.abort(); //強制中斷
}
oM.value=scale*100;
};
//讀取中斷
reader.onabort=function (){
alert('讀取中斷');
};
reader.readAsDataURL(oF);
return false;
};
//阻止瀏覽器默認事件
oDiv.ondragover=function (){
return false;
};
};
</script>
</head>
<body>
<img src="" id="pic" width="100" height="100" alt="" />
<div class="box">將文件拖到此區(qū)域</div>
<meter id="m" max="100" value="0"></meter>
</body>
</html>
