mirror of
https://github.com/swisspol/GCDWebServer.git
synced 2026-02-11 00:00:07 +08:00
91 lines
2.7 KiB
HTML
Executable File
91 lines
2.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Basic FileDrop example</title>
|
|
|
|
<script type="text/javascript" src="filedrop-min.js"></script>
|
|
|
|
<style type="text/css">
|
|
|
|
/* Essential FileDrop zone element configuration: */
|
|
.fd-zone {
|
|
position: relative;
|
|
overflow: hidden;
|
|
/* The following are not required but create a pretty box: */
|
|
width: 15em;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Hides <input type="file"> while simulating "Browse" button: */
|
|
.fd-file {
|
|
opacity: 0;
|
|
font-size: 118px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 0;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
filter: alpha(opacity=0);
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
/* Provides visible feedback when use drags a file over the drop zone: */
|
|
.fd-zone.over { border-color: maroon; background: #eee; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<noscript style="color: maroon">
|
|
<h2>JavaScript is disabled in your browser. How do you expect FileDrop to work?</h2>
|
|
</noscript>
|
|
|
|
<h2 style="text-align: center">
|
|
<a href="http://filedropjs.org">FileDrop</a> basic sample
|
|
</h2>
|
|
|
|
<!-- A FileDrop area. Can contain any text or elements, or be empty.
|
|
Can be of any HTML tag too, not necessary fieldset. -->
|
|
<fieldset id="zone">
|
|
<legend>Drop a file inside…</legend>
|
|
<p>Or click here to <em>Browse</em>..</p>
|
|
|
|
<!-- Putting another element on top of file input so it overlays it
|
|
and user can interact with it freely. -->
|
|
<p style="z-index: 10; position: relative">
|
|
<input type="checkbox" id="multiple">
|
|
<label for="multiple">Allow multiple selection</label>
|
|
</p>
|
|
</fieldset>
|
|
|
|
<script type="text/javascript">
|
|
// Attach FileDrop to an area ('zone' is an ID but you can also give a DOM node):
|
|
var zone = new FileDrop('zone', {});
|
|
|
|
// Do something when a user chooses or drops a file:
|
|
zone.event('send', function (files) {
|
|
// Depending on browser support files (FileList) might contain multiple items.
|
|
files.each(function (file) {
|
|
// React on successful AJAX upload:
|
|
file.event('done', function (xhr) {
|
|
// 'this' here points to fd.File instance that has triggered the event.
|
|
alert('Done uploading ' + this.name + ', response:\n\n' + xhr.responseText);
|
|
});
|
|
|
|
// Send the file:
|
|
file.sendTo('ajax-upload');
|
|
});
|
|
});
|
|
|
|
// A bit of sugar - toggling multiple selection:
|
|
fd.addEvent(fd.byID('multiple'), 'change', function (e) {
|
|
zone.multiple(e.currentTarget || e.srcElement.checked);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |