HTML5之文件拖拽

2015/09/20 109458

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

将HTML5中的文件拖拽封装成了类
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
drag.js: 
   
document.write("<script language='javascript' src='utility.js'></script>"); 
   
//// 
//要放在哪个容器，容器的ID 
//// 
function FileDrager(cntId){ 
this.containerId = cntId; 
} 
   
FileDrager.prototype = { 
   
// 判断是否图片 
isImage : function(type) { 
            switch (type) { 
            case 'image/jpeg': 
            case 'image/png': 
            case 'image/gif': 
            case 'image/bmp': 
            case 'image/jpg': 
                return true; 
            default: 
                return false; 
            } 
}, 
   
////初始化 
Init : function(){ 
    ////获得放图片的容器 
    var ctn = $(this.containerId); 
   
ctn.addEventListener('dragover',  function(evt) { 
            evt.stopPropagation(); 
            evt.preventDefault(); 
        }, false); 
   
   
ctn.addEventListener('drop', function(e) { 
   
e.stopPropagation(); 
e.preventDefault(); 
   
var fileList  = e.dataTransfer.files,　　//获取拖拽文件 
oImg = document.createElement('img'), 
reader = new FileReader(); 
   
var c = ctn; 
var x = e.clientX; 
var y = e.clientY; 
   
   
reader.onload = function(evt) { 
oImg.src = this.result; 
   
oImg.style.position = "absolute"; 
oImg.style.left = x; 
oImg.style.top = y; 
   
c.appendChild(oImg); 
} 
reader.readAsDataURL(fileList[0]); 
   
}, false); 
   
} 
   
   
}