1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < script >
6+ // 拖拽事件DragEvent HTML5
7+ // drag、dragend、dragenter、dragexit、dragleave、dragover、dragstart、drop
8+ // 常用的四个：dragenter、dragover、drop、dragend
9+ // 分别对应的事件为：拖进、拖来拖去、释放鼠标、拖出
10+ // 上传在drop进行(松开鼠标)，然后可从event取到dataTransfer.files对象，获得拖拽的数据
11+
12+ document . addEventListener ( "dragenter" , function ( event ) {
13+ console . log ( "dragenter" ) ;
14+ } , false ) ;
15+
16+ document . addEventListener ( "dragover" , function ( event ) {
17+ console . log ( "dragover" ) ;
18+ } , false ) ;
19+
20+ document . addEventListener ( "drop" , function ( event ) {
21+ event . preventDefault ( ) ; //禁止浏览器默认行为
22+ console . log ( "drop" ) ;
23+ // 获取文件
24+ console . log ( Object . prototype . toString . call ( event . dataTransfer . files ) ) ; //[object FileList]
25+ // 遍历文件
26+ var file ;
27+ var files = event . dataTransfer . files ;
28+ for ( var i = 0 ; i < files . length ; i ++ ) {
29+ // 识别文件/文件夹
30+ // event.dataTransfer不能很好的区分文件/文件夹:
31+ // 1. 部分文件夹仍会显示size
32+ // 2. 文件夹的File的type为""，不加拓展名的文件File的type也为""
33+ // 利用FileReader判断，三种方式可以读取文件，但是读取文件夹的时候会触发error
34+ // var fr = new FileReader();
35+ // fr.readAsBinaryString(file);
36+ // fr.readAsDataURL(file);
37+ // fr.readAsText(file);
38+ // fr.onload=function(e){
39+ // var data = this.result;
40+ // }
41+ // fr.onerror=function(e){
42+ // //...
43+ // }
44+ file = files [ i ] ; // 或 file = files.item(i);
45+ myFileReader ( file , function ( result , file ) {
46+ if ( result ) {
47+ //文件
48+ console . log ( "文件" ) ;
49+ } else {
50+ //文件夹
51+ console . log ( "文件夹" ) ;
52+ }
53+ } ) ;
54+ console . log ( file . name ) ;
55+ }
56+ return false ; //禁止浏览器默认行为
57+ } , false ) ;
58+
59+ document . addEventListener ( "dragend" , function ( event ) {
60+ console . log ( "dragend" ) ;
61+ } , false ) ;
62+
63+ function myFileReader ( file , callback ) {
64+ if ( ! window . FileReader ) {
65+ callback ( true , file ) ;
66+ return false ;
67+ }
68+ var fr = new FileReader ( ) ;
69+ fr . readAsDataURL ( file ) ;
70+ fr . onload = function ( e ) {
71+ callback ( true , file ) ;
72+ }
73+ fr . onerror = function ( e ) {
74+
75+ callback ( false , file ) ;
76+ }
77+ return true ;
78+ } ;
79+
80+ </ script >
81+
82+ </ head >
83+ < body >
84+
85+ </ body >
86+ </ html >
0 commit comments