forked from WebReflection/noSWFUpload
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (201 loc) · 9.79 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>noSWFUpload - Multiple Files Upload For Every Browser - No SWF Object Required</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="noSWFUpload - Multiple Files Upload For Every Browser - No SWF Object Required" />
<meta name="Keywords" content="upload,multiple,file,files,no swf,no flash,open source" />
<meta name="category" content="Web 2.0" />
<meta http-equiv="content-Language" content="en-US" />
<meta name="identifier-url" content="www.3site.eu" />
<meta name="author" content="Andrea Giammarchi" />
<meta name ="copyright" content="Andrea Giammarchi" />
<meta name ="generator" content="Notepad++" />
<meta name="code_Language" content="JavaScript" />
<meta name ="robots" content="ALL" />
<style type="text/css">
* {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
font-weight: normal;
}
img {
border: 0;
}
body {
text-align: center;
}
h1 {
font-size: 12pt;
}
h2 {
margin-top: 32px;
font-size: 8pt;
font-weight: bold;
}
h3 {
font-size: 8pt;
}
div.form {
text-align: left;
margin: auto;
width: 246px !important;
width: 242px;
height: 180px;
position: relative;
border: 1px solid #999;
}
input.submit {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
font-size: 8pt;
width: 248px !important;
width: 242px;
border: 1px solid #999;
margin: -1px 0 0 -1px;
position: absolute;
top: 180px;
left: 0;
}
</style>
<script type="text/javascript" src="noswfupload.js"></script>
<script type="text/javascript">
// add dedicated css
noswfupload.css("css/noswfupload.css", "css/noswfupload-icons.css");
onload = function(){
var
// the input type file to wrap
input = document.getElementsByTagName("input")[0],
// the submit button
submit = document.getElementsByTagName("input")[1],
// the form
form = document.getElementsByTagName("form")[0],
// the form action to use with noswfupload
url = form.getAttribute("action") || form.action,
// noswfupload wrap Object
wrap;
// if we do not need the form ...
// move inputs outside the form since we do not need it
with(form.parentNode){
appendChild(input);
appendChild(submit);
};
// remove the form
form.parentNode.removeChild(form);
// create the noswfupload.wrap Object with 1Mb of limit
wrap = noswfupload.wrap(input, 1024 * 1024);
// form and input are useless now (remove references)
form = input = null;
// assign event to the submit button
noswfupload.event.add(submit, "click", function(e){
// only if there is at least a file to upload
if(wrap.files.length){
submit.setAttribute("disabled", "disabled");
wrap.upload(
// it is possible to declare events directly here
// via Object
// {onload:function(){ ... }, onerror:function(){ ... }, etc ...}
// these callbacks will be injected in the wrap object
// In this case events are implemented manually
);
} else
noswfupload.text(wrap.dom.info, "No files selected");
submit.blur();
// block native events
return noswfupload.event.stop(e);
});
// set wrap object properties and methods (events)
// url to upload files
wrap.url = url;
// accepted file types (filter)
// wrap.fileType = "Images (*.jpg, *.jpeg, *.png, *.gif, *.bmp)";
// fileType could contain whatever text but filter checks *.{extension} if present
// handlers
wrap.onerror = function(){
noswfupload.text(this.dom.info, "WARNING: Unable to upload " + this.file.fileName);
};
// instantly vefore files are sent
wrap.onloadstart = function(rpe, xhr){
// we need to show progress bars and disable input file (no choice during upload)
this.show(0);
// write something in the span info
noswfupload.text(this.dom.info, "Preparing for upload ... ");
};
// event called during progress. It could be the real one, if browser supports it, or a simulated one.
wrap.onprogress = function(rpe, xhr){
// percent for each bar
this.show((this.sent + rpe.loaded) * 100 / this.total, rpe.loaded * 100 / rpe.total);
// info to show during upload
noswfupload.text(this.dom.info, "Uploading: " + this.file.fileName);
// fileSize is -1 only if browser does not support file info access
// this if splits recent browsers from others
if(this.file.fileSize !== -1){
// simulation property indicates when the progress event is fake
if(rpe.simulation)
// in this case sent data is fake but we still have the total so we could show something
noswfupload.text(this.dom.info,
"Uploading: " + this.file.fileName,
"Total Sent: " + noswfupload.size(this.sent + rpe.loaded) + " of " + noswfupload.size(this.total)
);
else
// this is the best case scenario, every information is valid
noswfupload.text(this.dom.info,
"Uploading: " + this.file.fileName,
"Sent: " + noswfupload.size(rpe.loaded) + " of " + noswfupload.size(rpe.total),
"Total Sent: " + noswfupload.size(this.sent + rpe.loaded) + " of " + noswfupload.size(this.total)
);
} else
// if fileSIze is -1 browser is using an iframe because it does not support
// files sent via Ajax (XMLHttpRequest)
// We can still show some information
noswfupload.text(this.dom.info,
"Uploading: " + this.file.fileName,
"Sent: " + (this.sent / 100) + " out of " + (this.total / 100)
);
};
// generated if there is something wrong during upload
wrap.onerror = function(){
// just inform the user something was wrong
noswfupload.text(this.dom.info, "WARNING: Unable to upload " + this.file.fileName);
};
// generated when every file has been sent (one or more, it does not matter)
wrap.onload = function(rpe, xhr){
var self = this;
// just show everything is fine ...
noswfupload.text(this.dom.info, "Upload complete");
// ... and after a second reset the component
setTimeout(function(){
self.clean(); // remove files from list
self.hide(); // hide progress bars and enable input file
noswfupload.text(self.dom.info, "");
// enable again the submit button/element
submit.removeAttribute("disabled");
}, 1000);
};
};
</script>
</head>
<body>
<h1>noSWFUpload Demo Page</h1>
<div class="form">
<form method="post" action="filereceiver.php" enctype="multipart/form-data">
<div>
<input type="file" name="test" />
<input class="submit" type="submit" value="Upload File" />
</div>
</form>
</div>
<h2>(C) Andrea Giammarchi - <a href="#">WebReflection</a></h2>
<h3><a href="#">noSWFUpload Project Page</a></h3>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml11-blue"
alt="Valid XHTML 1.1" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
</body>
</html>