1 <style> 2 div{ 3 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>