-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (197 loc) · 23.8 KB
/
index.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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="stylesheet" type="text/css" href="build/index.css" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root2"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="build/index.js"></script>
<script>
var initFiles = [
{
groupName: "jpg",
size: 2095,
name: "77x77.jpg",
type: "image/jpeg",
base64:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABNAE0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD24tUbyBVJPQU41znjDVv7K0GZ1bEkg2J9TUSdlccVd2PNPHHiH+0NUlO/9xD8qDPGPX8a8+uLsSsS/TsKffTXGpatHYWyGSaQ8KK7zRfhxa2mLjWLwPNjIRR8q/41zJ21e51/3Vscdp2jTXroqRsXk+6uO3qfavSdK8IQQWqxvGGOPmJHU10Wk6PptqhNqRIx5Zz1NaUstvbL+8kVPrWcnKRorR2PMPE3gwWX+n2CH5eXQVkaHqz6VqcF3CcbXBx/MV69LLbXURRXDBhjpXjPiO0Ok+IJ7cDEb/vI61g29GRKy1Poyzuo7y0iuIjlJFDKfrVjNcL8MtVN/wCF1jZsvbSGP8Oo/nXcg5FdC2OWSsxpryT4o6oXvY7QNhIhz9Tyf0r1ljgGvn74gXfma/cknIDEfoazq7JF0Vrc5DwddX7eLbi9sokkmigkk2t2AxXtN7/a6WTbG82dVBOI1AY9wK8f+F06Q+PYoZBlZ0kjIPfINfQHkXMSBFVJVAwGJwce9Z1NJGlPVXMGTUrnRraOcwfaVdlRlACNuPAx2xmlt7+fWo2uBCLYK7R7XAZgQcH9a0PsUl7fwvcBVht23rGOhfHBP0pv2V7PUJmtwpinbeyHoGxzj61leJrZmekeseSy+eEkOdv7sEZrz7xeuoXs2l3eoQlFktmZ2iHKjJOT+lewGC4mjKsqxqRgkHJ/CvPfiTeLaWjWy8CZFhUDsAcn+grSEveJlHQm+DN6VmvrYnh1VgPzr2MdK8C+GF0LfWgAcbhivfF5FdCe5zSWzCX7h+lfNfjSQvrl8D/z1b8q+lH5U189/EjTX0/xFKWGEmO9T65qKvRlUXucH4fvP7L8X6XfM21EuFEh9ATg/oa+pQ+YgQeMV8k3C8svbt9a97+G3il9a8PpaXZ/0u1Ajc/3xjg1lWWikaQ3sdRNfWM0uyEtJKhIITsag+22dq5e4EiE4A3An6VcmsI3yyqFc914pkWnJF87Dc3qTXNc604cpeWTdECDwRkV8+eNvEMms+IruNZA1rbzMkIHtgE/mK9P+IXig+HfDcgtmH2uf91Ef7uerfgK8DtQXIBJJJySa6aEbrmZy1ZfZR3fgdmGsW5HY5NfR9uS1vGT1KivAfhvYm61kbVyI1yfx6V7/Cu2JV9Bit47tmdTZIkPSuY8X+FrTxNprQSnZMv+qk/umvNte+N108jR6LZpEg6SzfMx/DpXQ/DFte8SzyeINbu5Xt0ylrF0Qt3bHoOn5+laOF1qYJ2ehwM3wg8R/wBpLD5cfkueZQeAK67wT4JvPDGoXiXbq29V2le/WvXpJEiXMjqo6ZY4rN1W3dUjuUGfLbDD/ZP+RWNan7jsbU5+8ZTrOowpyPehUncfMcCre3eoIqOXfHEdqlmPCgdzXn2Z1JnI+I/BY8X38MBk2R20Tkt/tsML/ImvN7j4XeJbDU0tPIRoncKJ1b5ce/pX0Zplh9htVVyDK53SN6t/nirF1aQ3ls8Mq7kdSrCvSpU+WCTOadS8ro5PwT4Ph8MaaEZhJdSfNLJ7+g9q64dK+fNZ8VeK/AXiq60n+0Xnt4nDQi4G/dGeV/Tj6g10+n/HC2a3/wBP0x1l/wCmL8H861UGtjJyu9Tw/q3Suqb4h+KhapbQambaFF2qlugQKPQYrkZODkVOpyoPqK0My3c6vql3OLi61K6mkUhgXlPUV9OeHtVvL/Srea5Cyb1B3YxnivlntX1J4BkW68E6VKYwrGBc47nHJpMaNJoQk6iP7jn5R6H0qyipC+Ahkk7nHC1ZWNfvY5BzTweOnWsY0YqVzV1G1Y8h+Nut6haWWl21rcvbiSYyHy2wx2jjn6muQ0D4x+ItICxXpTUYBx++4f8A76HX8aufHG5kk8UWNsfuR228fVmIP/oIry+t7Gdzu/iH4y0bxnBZ3tvZz2upwny3VsFXjOT1Hof5muHRvlqE/ex7U4HAoA//2Q=="
},
{
groupName: "png",
size: 2095,
name: "77x77.jpg",
type: "image/jpeg",
base64:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABNAE0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD24tUbyBVJPQU41znjDVv7K0GZ1bEkg2J9TUSdlccVd2PNPHHiH+0NUlO/9xD8qDPGPX8a8+uLsSsS/TsKffTXGpatHYWyGSaQ8KK7zRfhxa2mLjWLwPNjIRR8q/41zJ21e51/3Vscdp2jTXroqRsXk+6uO3qfavSdK8IQQWqxvGGOPmJHU10Wk6PptqhNqRIx5Zz1NaUstvbL+8kVPrWcnKRorR2PMPE3gwWX+n2CH5eXQVkaHqz6VqcF3CcbXBx/MV69LLbXURRXDBhjpXjPiO0Ok+IJ7cDEb/vI61g29GRKy1Poyzuo7y0iuIjlJFDKfrVjNcL8MtVN/wCF1jZsvbSGP8Oo/nXcg5FdC2OWSsxpryT4o6oXvY7QNhIhz9Tyf0r1ljgGvn74gXfma/cknIDEfoazq7JF0Vrc5DwddX7eLbi9sokkmigkk2t2AxXtN7/a6WTbG82dVBOI1AY9wK8f+F06Q+PYoZBlZ0kjIPfINfQHkXMSBFVJVAwGJwce9Z1NJGlPVXMGTUrnRraOcwfaVdlRlACNuPAx2xmlt7+fWo2uBCLYK7R7XAZgQcH9a0PsUl7fwvcBVht23rGOhfHBP0pv2V7PUJmtwpinbeyHoGxzj61leJrZmekeseSy+eEkOdv7sEZrz7xeuoXs2l3eoQlFktmZ2iHKjJOT+lewGC4mjKsqxqRgkHJ/CvPfiTeLaWjWy8CZFhUDsAcn+grSEveJlHQm+DN6VmvrYnh1VgPzr2MdK8C+GF0LfWgAcbhivfF5FdCe5zSWzCX7h+lfNfjSQvrl8D/z1b8q+lH5U189/EjTX0/xFKWGEmO9T65qKvRlUXucH4fvP7L8X6XfM21EuFEh9ATg/oa+pQ+YgQeMV8k3C8svbt9a97+G3il9a8PpaXZ/0u1Ajc/3xjg1lWWikaQ3sdRNfWM0uyEtJKhIITsag+22dq5e4EiE4A3An6VcmsI3yyqFc914pkWnJF87Dc3qTXNc604cpeWTdECDwRkV8+eNvEMms+IruNZA1rbzMkIHtgE/mK9P+IXig+HfDcgtmH2uf91Ef7uerfgK8DtQXIBJJJySa6aEbrmZy1ZfZR3fgdmGsW5HY5NfR9uS1vGT1KivAfhvYm61kbVyI1yfx6V7/Cu2JV9Bit47tmdTZIkPSuY8X+FrTxNprQSnZMv+qk/umvNte+N108jR6LZpEg6SzfMx/DpXQ/DFte8SzyeINbu5Xt0ylrF0Qt3bHoOn5+laOF1qYJ2ehwM3wg8R/wBpLD5cfkueZQeAK67wT4JvPDGoXiXbq29V2le/WvXpJEiXMjqo6ZY4rN1W3dUjuUGfLbDD/ZP+RWNan7jsbU5+8ZTrOowpyPehUncfMcCre3eoIqOXfHEdqlmPCgdzXn2Z1JnI+I/BY8X38MBk2R20Tkt/tsML/ImvN7j4XeJbDU0tPIRoncKJ1b5ce/pX0Zplh9htVVyDK53SN6t/nirF1aQ3ls8Mq7kdSrCvSpU+WCTOadS8ro5PwT4Ph8MaaEZhJdSfNLJ7+g9q64dK+fNZ8VeK/AXiq60n+0Xnt4nDQi4G/dGeV/Tj6g10+n/HC2a3/wBP0x1l/wCmL8H861UGtjJyu9Tw/q3Suqb4h+KhapbQambaFF2qlugQKPQYrkZODkVOpyoPqK0My3c6vql3OLi61K6mkUhgXlPUV9OeHtVvL/Srea5Cyb1B3YxnivlntX1J4BkW68E6VKYwrGBc47nHJpMaNJoQk6iP7jn5R6H0qyipC+Ahkk7nHC1ZWNfvY5BzTweOnWsY0YqVzV1G1Y8h+Nut6haWWl21rcvbiSYyHy2wx2jjn6muQ0D4x+ItICxXpTUYBx++4f8A76HX8aufHG5kk8UWNsfuR228fVmIP/oIry+t7Gdzu/iH4y0bxnBZ3tvZz2upwny3VsFXjOT1Hof5muHRvlqE/ex7U4HAoA//2Q=="
},
{
groupName: "png",
size: 2534,
name: "147x56.jpg",
type: "image/jpeg",
base64:
"data:image/jpeg;base64,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"
},
{
groupName: "jpg",
size: 2534,
name: "147x56.jpg",
type: "image/jpeg",
base64:
"data:image/jpeg;base64,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"
},
{
groupName: "null",
size: 2095,
name: "77x77.jpg",
type: "image/jpeg",
base64:
"data:image/jpeg;base64,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"
},
{
groupName: "jpg",
size: 2534,
name: "147x56.jpg",
type: "image/jpeg",
base64:
"data:image/jpeg;base64,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"
}
];
function getValidateFn(group) {
var required = group.required;
var min = group.min;
var max = group.max;
return function(files) {
if (required) {
if (files.length === 0) {
return "请选择一个文件";
}
}
if (min !== undefined) {
if (files.length < min) {
return "最少选择" + min + "各文件";
}
}
if (max !== undefined) {
if (files.length > max) {
return "最多选择" + max + "各文件";
}
}
let flag = false;
files.forEach(function(file) {
if (file.file.size > 500 * 1024) {
flag = true;
// 不合法的文件外框设置红色
document.getElementById(
"img-container-" + file.id
).style.borderColor = "red";
}
});
if (flag) {
return "文件大小必须小于500k";
}
return true;
};
}
var groups = [
{
groupName: "jpg",
groupTitle: "jpg图片",
groupDesc: "jpg files",
required: true,
min: 1,
max: 3
},
{
required: true,
min: 2,
groupName: "png",
groupTitle: "png图片",
groupDesc: "png files"
}
];
groups.forEach(function(group) {
group.validate = getValidateFn(group);
group.getFileProps = function(file) {
// 每个组获取文件的属性方法，也可以根据需要像上面一样针对不同的group定制
if (file.file.size > 10 * 1024) {
return {
style: {
border: "1px solid red"
},
className: "file-has-error"
};
}
};
});
var option = {
onChange: function(files, errors) {
console.log(files);
console.log(errors);
},
// 最右边的待选栏中文件属性的方法
getNullFileProps:function(file) {
if (file.file.size > 2 * 1024) {
return {
style: {
border: "1px solid red"
},
className: "file-has-error"
};
}
},
editable: true,
groupWidth: 100,
descWidth: 100,
dropWidth: 300,
uploadWidth: 300,
getUploadProps: function(unGroupedFiles) {
console.log("in getUploadProps: ", unGroupedFiles);
if (unGroupedFiles.length > 2) {
return { disabled: true, className: "aaa" };
}
}
};
var ret = renderFilesGroup(
document.getElementById("root"),
groups,
option
);
ret = renderFilesGroup(
document.getElementById("root2"),
groups,
option
);
ret.addFiles(initFiles);
setTimeout(function() {
ret.addFile(initFiles[0]);
}, 3000);
</script>
</body>
</html>