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
| var dragUpload = {
file: document.getElementById('file'),
fileArea: document.getElementById('fileArea'),
init:function() {
var self = this;
this.fileArea.onclick = function() {
var event = document.createEvent('MouseEvents');//调用document对象的 createEvent 方法得到一个event的对象实例。
/*initEvent接受3个参数：
事件类型，是否冒泡，是否阻止浏览器的默认行为*/
event.initEvent('click', true, false);
self.file.dispatchEvent(event);//触发控件的单击事件
};
this.file.onchange = function() {
self.upload(this.files);
};
this.fileArea.ondragenter = function(ev) {
self.dragEnter(ev,this);
};
this.fileArea.ondragover = function(ev) {
self.dragOver(ev,this);
};
this.fileArea.ondrop = function(ev) {
self.drop(ev,this);
};
},
upload:function(fs) {//上传文件
for(var i = 0,len = fs.length; i < len; i++) {
this.sendFile(fs[i]);
}
},
dragEnter:function(ev,my) {//文件进入回调函数
ev.preventDefault();
console.log('dragEnter');
my.className = 'up-area hover';
},
dragOver:function(ev,my) { //文件经过回调函数
ev.preventDefault();
console.log('dragOver');
},
drop:function(ev,my) {//放入文件回调函数
ev.preventDefault();
console.log('drop');
var dt = ev.dataTransfer;//获取文件对象
my.className = 'up-area';
dragUpload.upload(dt.files);
},
sendFile:function(file) {//上传文件主函数
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append('file', file);
xhr.onreadystatechange = function() {
if(xhr.readyState ===4 && xhr.status === 200) {
document.getElementById('console').innerHTML += '<br/>'+xhr.responseText;
}
};
xhr.open('POST', 'upload.php ',true);
xhr.send(fd);
}
};
dragUpload.init();
|