-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
99 lines (98 loc) · 2.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="dist/jquery-simple-upload.css">
<script src="dist/jquery-simple-upload.js"></script>
<style>
.dropZone {
width: 300px;
height: 50px;
border: 1px solid #ccc;
}
#basic_message {
height: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>Basic use</h1>
<input type="file" name="file" multiple="true" id="basic">
<div id="basic_drop_zone" class="dropZone"><div>Drop files here</div></div>
<div id="basic_progress"></div>
<div id="basic_message"></div>
<script>
$('#basic').simpleUpload({
url: '/post',
method: 'post',
params: { key: 'test' },
ajax: {
headers: { 'X-Test': 'test' },
statusCode: {
200: function() {
console.log('success!');
}
}
},
dropZone: '#basic_drop_zone',
progress: '#basic_progress'
}).on('upload:before', function(e, files) {
console.log('before');
console.log(files);
}).on('upload:after', function(e, files) {
console.log('after');
console.log(files);
}).on('upload:start', function(e, file, i) {
console.log('start ' + i);
console.log(file);
}).on('upload:progress', function(e, file, i, loaded, total) {
console.log('progress ' + i + ' ' + loaded + '/' + total);
}).on('upload:end', function(e, file, i) {
console.log('end ' + i);
console.log(file);
}).on('upload:done', function(e, file, i) {
console.log('done ' + i);
console.log(file);
$('#basic_message').prepend('<p>done: ' + file.name + '</p>');
}).on('upload:fail', function(e, file, i) {
console.log('fail ' + i);
console.log(file);
$('#basic_message').prepend('<p>fail: ' + file.name + '</p>');
});
</script>
<h1>Limit</h1>
<p>1 file, < 100 Bytes</p>
<input type="file" name="file" multiple="true" id="limit">
<div id="limit_drop_zone" class="dropZone">Drop files here</div>
<script>
$('#limit').simpleUpload({
url: '/post',
maxFileNum: 4,
maxFileSize: 100,
allowedFileName: /\.txt$/,
allowedMimeType: /^text\//,
dropZone: '#limit_drop_zone',
validator: validate,
}).on('upload:over', function(e, files) {
alert('Number of files is over');
}).on('upload:invalid', function(e, files) {
for (var i=0; i<files.length; i++) {
alert('Invalid ' + files[i].reason + ': ' + files[i].name);
}
});
function validate(files) {
var passed = []
for (var i=0; i<files.length; i++) {
if (files[i].name == 'test.txt') {
alert("can't upload test.txt");
} else {
passed.push(files[i]);
}
}
return passed;
}
</script>
</body>
</html>