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
| <body>
<div id="file">点击或将文件拖放到此处</div>
<ul id='output'></ul>
</body>
<script>
document.getElementById("file").addEventListener('dragover', handleDrop, false);
document.getElementById("file").addEventListener('drop', handleFileSelect, false);
document.getElementById("file").addEventListener('click', handleClick, false);
function handleClick(){
var text = "<input type='file' onChange='handleFileChangeSelect() />'";
var f = document.createElement('input');
f.type = 'file'
f.addEventListener("change", handleFileChangeSelect, false);
f.multiple = true
f.click()
};
function handleDrop(e){
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function handleFileSelect(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
viewFiles(files);
}
function handleFileChangeSelect(e) {
e.stopPropagation();
e.preventDefault();
var files = e.target.files;
viewFiles(files);
}
function viewFiles(files){
var content = '';
content = `<li>总数: ${files.length}</li>`
for(var i = 0; i < files.length; i++){
var f = files[i]
content += '<li>-------------------------</li>';
content += `<li>name: ${f.name}</li>`;
content += `<li>size: ${f.size}</li>`;
content += `<li>type: ${f.type}</li>`;
content += `<li>lastModified: ${f.lastModified}</li>`;
content += `<li>lastModifiedDate: ${f.lastModifiedDate}</li>`;
}
document.getElementById("output").innerHTML = content;
}
</script>
|