This repository has been archived by the owner on Nov 19, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
executable file
·457 lines (414 loc) · 23.4 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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fine Uploader Javascript Upload Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Fine Uploader. A dependency-free, open-source, native browser upload tool.">
<meta name="keywords" content="fineuploader features, fine uploader features, javascript uploader, javascript upload library" />
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://yandex.st/highlightjs/7.3/styles/magula.min.css" />
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9.css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://yandex.st/highlightjs/7.2/highlight.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/ui/ui-scripts.js"></script>
<script type="text/javascript" src="js/skrollr/skrollr.js"></script>
</head>
<body class="home">
<div class="jumbotron-small fixed">
<div class="container">
<div id="navbar"></div>
</div>
</div>
<div id="skrollr-body">
<section class="container support">
<div class="marketing">
<header>
<span style="
font-size: 24px;
color: red;
">The Fine Uploader project has reached the end of its life. Please see <a href="https://github.com/FineUploader/fine-uploader/issues/2073">the issue tracker</a> for additional details.</span>
<h1>
<span class="name-container">
<img src="img/fineuploader-header-logo.png" alt="Fine Uploader" class="full-logo header"/>
</span>
<span class="orange version-number">5</span>
</h1>
<h2>File uploading <span class="orange">without</span> the hassle</h2>
<div class="showcase">
<div class="ribbon-wrapper">
<div class="ribbon">NEW</div>
</div>
<div class="react-fine-uploader-logo">
<a href="https://github.com/FineUploader/react-fine-uploader" target="_blank">
<div class="react-title">React</div>
<img class="fine-uploader-logo" src="img/fineuploader-header-logo.png" width="300">
</a>
</div>
<div>Easily create a powerful, elegant, and flexible file upload component with React.</div>
</div>
</header>
<div class="spacer"></div>
<section>
<div class="row-fluid container">
<div class="span6 p8 right">
<img height="200" src="/img/browsers.png" alt="Fine Uploader supports iOS, Internet Explorer, Opera, Firefox, Chrome, Safari, and Android" style="margin-top:0px; width: 200px;"/>
</div>
<div class="span6 left">
<h3>Browser support</h3>
<p>Fine Uploader supports <a href="http://docs.fineuploader.com/branch/master/browser-support.html">all major browsers</a> and does <span class="orange">not</span> require Flash, jQuery, or any external libraries.</p>
</div>
</div>
</section>
<hr class="no-margin">
<hr class="no-margin">
<section class="server-support">
<div class="row-fluid container">
<div class="span6 p8">
<img height="200" src="/img/server-support.png" alt="Fine Uploader supports erlang, Java, PHP, python, node.js, coldfusion, perl, ruby, go, and all other server-side languages." style="margin-top:30px; width: 200px;"/>
</div>
<div class="span6 p8 server-support">
<h3>Server support</h3>
<p>Use Fine Uploader with <span class="orange">any</span> server side technology.</p>
</div>
</div>
</section>
</div>
</section>
<h2 class="marketing-byline center get-started"><a class="orange" href="http://docs.fineuploader.com/quickstart/01-getting-started.html" target="_blank">Get started now!</a></h2>
<div class="progress">
<div id="progress" data-0="width:0%; background:#00abc7;" data-530="width:100%; background:#00abc7;" class="progress-bar" style="width: 27.719298245614034%; background-color: #00abc7;"></div>
</div>
<div class="spacer"></div>
<div id="features" style="margin-top: -300px; padding-top: 300px;"></div>
<section class="features-section marketing" data-0="margin-top:-50px;" data-990="margin-top:-270px;">
<div class="container">
<h1>Features</h1>
<p class="marketing-byline center"><span class="orange">Everything you need</span> in a JavaScript file upload library</p>
<hr class="no-margin">
<hr class="no-margin">
<div class="row-fluid mt20">
<div class="span4 featurette">
<h3>Progress Bar</h3>
<p>A fully customizable progress bar is included in UI mode. Core users can build their own with the help of a friendly API.</p>
</div>
<div class="span4 featurette">
<h3>Drag and Drop</h3>
<p>Drag and drop files (and even folders in Chrome and Opera) straight from your desktop.
</p>
</div>
<div class="span4 featurette">
<h3>Retry</h3>
<p>Sometimes the network misbehaves. Fortunately, Fine Uploader can detect these sorts of disturbances and notify the user, or even automatically retry uploading the failed piece.
</p>
</div>
</div>
<div class="row-fluid mt20">
<div class="span4 featurette">
<h3>Validators </h3>
<p>Limit your users to a specific file type, size limit, number of files, image dimensions, or write your own custom validator.</p>
</div>
<div class="span4 featurette">
<h3>File Chunking / Partitioning</h3>
<p>Splitting a file into smaller pieces allows for a more efficient overall upload, and powers some Fine Uploader features such as pausing, and resuming uploads. Fine Uploader can also upload multiple chunks for the same file concurrently.</p>
</div>
<div class="span4 featurette">
<h3>Pause / Resume Uploads</h3>
<p>Pause an in-progress upload when you know you are about to go offline, and safely resume them again right where you left off.</p>
</div>
</div>
<div class="row-fluid mt20">
<div class="span4 featurette">
<h3>Delete Uploaded Files</h3>
<p>Upload the wrong file? Use this feature to delete what you don't need.</p>
</div>
<div class="span4 featurette">
<h3>Upload to the Cloud</h3>
<p>Send files directly to Amazon’s Simple Storage Service (S3) or Microsoft Azure's Blob Storage service to minimize backend code and scale with the number of users. You can even optionally bypass your local server entirely with S3.</p>
</div>
<div class="span4 featurette">
<h3>Image Previews & Scaling</h3>
<p>Give your users an in-browser preview of images before they upload. You can even have scaled versions of images generated and uploaded automatically, keeping EXIF data intact.
</p>
</div>
</div>
<div class="spacer"></div>
<div class="row-fluid mt20">
<div class="span4 p8 accordion" style="padding-left:0px;">
<div class="accordion-group">
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapseOne" class="accordion-toggle-faq collapsed">Multiple file selection</a>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Select more than one file at a time.</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse24" class="accordion-toggle-faq collapsed">ES6 modules & CommonJS support</a>
<div id="collapse24" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Import Fine Uploader using ECMASCript 6 modules, CommonJS, AMD, or traditional <script> tags. More details on <a href="http://docs.fineuploader.com/features/modules.html" target="_blank">the modules feature page</a>.</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse22" class="accordion-toggle-faq collapsed">Simple to Style and Customize</a>
<div id="collapse22" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Customize the layout simply and easily by editing HTML and CSS; no JavaScript!
</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse4" class="accordion-toggle-faq collapsed">Auto and manual upload</a>
<div id="collapse4" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Fine Uploader can begin uploading files as soon as possible, or simply wait until for the user.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="span4 accordion">
<div class="accordion-group">
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse9" class="accordion-toggle-faq collapsed">CORS (cross-origin) support</a>
<div id="collapse9" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Fine Uploader makes handling cross-origin environments pain-free.
</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse3" class="accordion-toggle-faq collapsed">Cancel uploads</a>
<div id="collapse3" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Fine Uploader makes it simple and easy to cancel one or all of the currently uploading files.
</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse12" class="accordion-toggle-faq collapsed">Edit file names</a>
<div id="collapse12" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Allow your users to change the names of the files they are uploading.
</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#initialList" data-toggle="collapse" href="#collapse13" class="accordion-toggle-faq collapsed">Provide initial list of files</a>
<div id="collapse13" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Ask Fine Uploader to display an initial list of files uploaded in a previous session.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="span4 accordion">
<div class="accordion-group">
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse21" class="accordion-toggle-faq collapsed">Multiple upload buttons</a>
<div id="collapse21" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Support for complex web applications that may have multiple upload inputs.
</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse10" class="accordion-toggle-faq collapsed">Paste to upload</a>
<div id="collapse10" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>With a browser that supports HTML5 Clipboard API and Fine Uploader one can easily enable users to upload files that they have copied onto their clipboard.</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse11" class="accordion-toggle-faq collapsed">Upload from mobile camera</a>
<div id="collapse11" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Take a picture and upload it immediately afterward.</p>
</div>
</div>
</div>
<div class="accordion-heading-features">
<a data-parent="#accordionFAQ" data-toggle="collapse" href="#collapse23" class="accordion-toggle-faq collapsed">Integrate with an existing form</a>
<div id="collapse23" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner-faq">
<p>Easily add the ability to upload files to an existing HTML form.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
<p class="marketing text-large"><a href="http://docs.fineuploader.com/#features">Visit the docs</a> for more feature information</p>
<div class="spacer"></div>
</div>
</section>
<hr class="no-margin">
<hr class="no-margin">
<section class="about-home marketing" data-2000="margin-top:0px;" data-2880="margin-top:-160px;">
<div class="container row-fluid" data-1000="opacity:0.3;" data-1400="opacity: 1">
<div class="span6 community-tag">
<h2>Community-driven</h2>
<h3>Completely "free as in speech" open source software, developed by the community, and sponsored by a company that cares.</h3>
</div>
<div class="span6 marketing-text community-message">
<p class="white">Here are a few other reasons to choose Fine Uploader: </p>
<ul>
<li>Meticulously developed, maintained, and supported. Unmatched by any other similar library available.</li>
<li>Flexible enough to fit into your typical or completely atypical web app.</li>
<li>Connected to the community. Developed, maintained, and supported by developers who rely heavily on the library.</li>
<li>Organized, maintained, and overseen by frontend development experts.</li>
</ul>
</div>
</div>
<div class="spacer"></div>
</section>
<hr class="no-margin">
<hr class="no-margin">
<section class="web-marketing" data-2200="margin-top:0px;" data-2920="margin-top:-270px;">
<div class="marketing">
<section class="grey">
<h2>Applications using Fine Uploader</h2>
</br>
<div class="row-fluid container logos">
<div class="span4">
<a href="http://smartimage.com"><img src="img/primary-smartimage-logo.png" alt="Smartimage"/></a>
</div>
<div class="span4">
<a href="https://probinder.com/home"><img src="img/probinder-logo.png" alt="ProBinder" class="probinder"/></a>
</div>
<div class="span4">
<a href="http://www.dfstudio.com/blog/2013/11/df-studio-updates-october-2013/" target="_blank"><img src="img/DF_Studio.png" alt="DF Studio"/></a>
</div>
</div>
<div class="row-fluid container logos">
<div class="span4">
<a href="https://www.atlassian.com/"><img src="img/atlassian-rgb-navy-medium.png" alt="FastFig"/></a>
</div>
<div class="span4">
<a href="http://deskpro.com"><img src="https://www.deskpro.com/assets/build/img/deskpro/logo_2x.png" alt="deskpro" class="deskpro"/></a>
</div>
<div class="span4">
<a href="http://www.storyboardthat.com/"><img src="img/storyboard-logo.png" alt="Storyboard That" /></a>
</div>
</div>
<div class="container">
<div class="spacer"></div>
<hr class="no-margin">
<hr class="no-margin">
<div class="spacer"></div>
</div>
<h3>Around the Web</h3>
</br>
<div class="row-fluid container mt20">
<div class="span4">
<p style="font-family: 'Helvetica Neue',Helvetica,Ubuntu,arial,sans-serif; color: #00AAAA; font-size: 24px; font-weight: bold;">
<a href="http://javascriptweekly.com/archive/154.html" target="_blank" style="text-decoration: none; color: #00AAAA;">
JavaScript<img src="img/javascript-weekly-cog.png" alt="Javascript Weekly" style="height: 24px; margin: 0px 5px;"/>Weekly</a>
</div>
<div class="span4">
<p style="font-family: 'Helvetica Neue',Helvetica,Ubuntu,arial,sans-serif; color: #00AAAA; font-size: 24px; font-weight: bold;">
<a href="https://www.sitepoint.com/10-jquery-file-uploads/" target="_blank" style="text-decoration: none; color: #00AAAA;">
<img src="img/sitepoint-logo-new.png" alt="Sitepoint" style="height: 50px; margin: -10px 5px;"/></a>
</div>
<div class="span4">
<p style="font-family: Helvetica,Arial,sans-serif; font-size: 24px; font-weight: 600; color: #404040; text-shadow: 1px 1px #FFFFFF; margin-top: 5px;">
<a href="http://dailyjs.com/2013/08/20/jquery-roundup/" target="_blank" style="color: #404040; text-decoration: none;">
<img src="img/dailyjs-logo.gif" alt="Daily JS" style="height: 24px; vertical-align: top; margin-right: 5px;"/>DailyJS</a>
</div>
</div>
<div class="row-fluid container mt20">
<div class="span4">
<a href="http://designscrazed.com/html5-jquery-file-upload-scripts/" target="_blank"><img src="img/dzcrazed-logo.png" alt="design crazed"/></a>
</div>
<div class="span4">
<a href="http://www.queness.com/post/11434/7-javascript-ajax-file-upload-plugins" target="_blank"><img src="img/queness-logo.png" alt="Queness" style="height: 70px;"/></a>
</div>
<div class="span4">
<a href="https://twitter.com/smashingmag/status/282529764957376512" target="_blank"><img src="img/smashing-magazine.png" alt="smashing magazine" style="height: 56px; margin: 10px 60px;"/></a>
</div>
</div>
<div class="spacer"></div>
</section>
</div>
</section>
<div style="clear:both"></div>
<div id="footer"></div>
</div>
<div id="fineuploader-php-modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="center">Access to the Fine Uploader PHP Beta</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span6">
<p class="center"><a href="https://s3.amazonaws.com/fine-uploader-php/releases/fine-uploader-php-0.1.8.zip"><i class="icon-download-alt"></i> Get the Download</a></p>
</div>
<div class="span6">
<p class="center"><a href="https://github.com/FineUploader/fine-uploader-php-docs/wiki/Installation-Guide"><i class="icon-book"></i> Read the Install Guide</a></p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.dropdown-toggle').dropdown();
$.get('./navbar.html', function(data) {
$('#navbar').html(data);
if (window.location.hash == '') {
$('#navbar').find('li').eq(0).addClass('active');
} else {
$('#navbar').find('a[href$="' + window.location.hash + '"]').parent().addClass('active');
}
});
$.get('./footer.html', function(data) {
$('#footer').html(data);
});
$.get('./header.html', function(data) {
$('#header').html(data);
});
</script>
<script type="text/javascript">
window.onload = function() {
var s = skrollr.init({
edgeStrategy: 'set',
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
if (screen.width >= 767) {
$('.progress').show();
}
}
</script>
</body>
</html>