|
|
@@ -0,0 +1,91 @@
|
|
|
+<!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>
|
Pierre-Olivier Latour