-
Notifications
You must be signed in to change notification settings - Fork 26
/
读取拖放文件.html
53 lines (48 loc) · 1.27 KB
/
读取拖放文件.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>读取拖放文件demo</title>
<style type="text/css">
#droptarget{
width: 600px;
height: 200px;
border:1px solid red;
}
#content{
width: 600px;
height: 400px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="droptarget">这里是文件放置目标</div>
<div id="content">这里是读取到内容之后的显示区</div>
<script>
var tar = document.querySelector('#droptarget');
var content = document.querySelector('#content');
tar.addEventListener('dragover',function(e){
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});
tar.addEventListener('drop',function(e){
e.preventDefault();
e.stopPropagation();
var fileList = e.dataTransfer.files;
if(fileList.length>0){
var file = fileList[0];
var reader = new FileReader();
reader.onloadend = function(e){
if(e.target.readyState == FileReader.DONE){
var con = reader.result;
content.innerHTML = "File" + file.name + "\n" + con;
}
};
reader.readAsBinaryString(file);
}
});
</script>
</body>
</html>