1 <style>
2 div{
3 width: 300px;
4 height: 300px;
5 border:1px dashed #000;
6 position:absolute;
7 top: 50%;
8 left: 50%;
9 margin:-150px 0 0 -150px;
10 text-align:center;
11 font:20px/300px '微软雅黑';
12 display:none;
13 }
14 </style>
15 <script>
16 window.onload = function () {
17 var oBox = document.getElementById('box');
18 var oM = document.getElementById('m1');
19 var timer = null;
20 document.ondragover = function(){
21 clearTimeout(timer);
22 timer = setTimeout(function(){
23 oBox.style.display = 'none';
24 },200);
25 oBox.style.display = 'block';
26 };
27 //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
28 oBox.ondragenter = function(){
29 oBox.innerHTML = '请释放鼠标';
30 };
31 oBox.ondragover = function(){
32 return false;
33 };
34 oBox.ondragleave = function(){
35 oBox.innerHTML = '请将文件拖拽到此区域';
36 };
37 oBox.ondrop = function(ev){
38 var oFile = ev.dataTransfer.files[0];
39 var reader = new FileReader();
40 //读取成功
41 reader.onload = function(){
42 console.log(reader);
43 };
44 reader.onloadstart = function(){
45 alert('读取开始');
46 };
47 reader.onloadend = function(){
48 alert('读取结束');
49 };
50 reader.onabort = function(){
51 alert('中断');
52 };
53 reader.onerror = function(){
54 alert('读取失败');
55 };
56 reader.onprogress = function(ev){
57 var scale = ev.loaded/ev.total;
58 if(scale>=0.5){
59 alert(1);
60 reader.abort();
61 }
62 oM.value = scale*100;
63 };
64 reader.readAsDataURL(oFile,'base64');
65 return false;
66 };
67 };
68 </script>
69 </head>
70 <body>
71 <meter id="m1" value="0" min="0" max="100"></meter>
72 <div id="box">请将文件拖拽到此区域</div>
73 </body>
