Added Drag & Drop browser file upload demo based on filedropjs.org

2026-04-24 00:00:04 +08:00 · 2014-03-20 17:55:20 -07:00
parent dc7fe87878
commit 47b8ea5f7c
4 changed files with 165 additions and 1 deletions
@@ -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&hellip;</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>