drag-drop-->dataTransfer
发布时间:2020-12-15 00:34:47 所属栏目:C语言 来源:网络整理
导读:table class="html5" tr class="li1" td class="ln"pre class="de1"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
<table class="html5"> |
<tr class="li1">
<td class="ln"><pre class="de1">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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
>
?
? ? >
? ? DataTransfer>
? ?
? ? * {
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? }
? ?
? ? ul {
? ? ? ? list-style: none;
? ? }
? ?
? ? li {
? ? ? ? width: 150px;
? ? ? ? height: 150px;
? ? ? ? margin-right: 10px;
? ? ? ? margin-bottom: 50px;
? ? ? ? float: left;
? ? }
? ?
? ? li img {
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? border-radius: 5px;
? ? ? ? border: 1px solid #ddd;
? ? }
? ?
? ? .drop-box {
? ? ? ? clear: both;
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? line-height: 200px;
? ? ? ? border: 2px dashed #aaa;
? ? ? ? margin-bottom: 100px;
? ? ? ? text-align: center;
? ? }
? ?
? ? .image {
? ? ? ? margin-bottom: 10px;
? ? }
? ?
? ? .title {
? ? ? ? text-align: center;
? ? }
? ? >
>
?
? ? >
? ? ? ? >请拖拽上传>
? ? ? ? ><>
? ? >
>
var box = document.querySelector('.drop-box');
var flag = false;
var iNow = 0;
?
box.ondragover = function(e) {
? ? e.preventDefault();
? ? this.innerHTML = '请松开鼠标';
?
}
box.ondragleave = function() {
? ? this.innerHTML = '请拖拽上传';
}
?
box.ondrop = function(e) {
? ? var files = e.dataTransfer.files;
? ? var imgList = document.querySelector('.img-list');
? ? var pList = [];
? ? var item;
?
? ? e.preventDefault();
? ? this.innerHTML = '请拖拽上传';
?
?
? ? var arr = [];
?
? ? function getResult(fileReader,name) {
? ? ? ? return new Promise(function(resolve) {
? ? ? ? ? ? fileReader.onload = function() {
? ? ? ? ? ? ? ? var url = this.result;
? ? ? ? ? ? ? ? var str = `>
? ? ? ? ? ? ? ? ? ? $url>
? ? ? ? ? ? ? ? ? ? >${name}>
? ? ? ? ? ? ? ? ? ?>`;
?
? ? ? ? ? ? ? ? resolve(str);
? ? ? ? ? ? }
? ? ? ? });
? ? }
?
? ? for (let i = 0; i
new FileReader;
filesi;
getResultfileReader,filesi.;
?
arr.thenfunctionarr
arr.reducefunctionprev,next
,;
;
>
?
>
?
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!