文件拖拽上传 

 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>

 

posted @ 2016-11-12 23:56  Jason齐齐  阅读(268)  评论(0)    收藏  举报