XCAppCollection
/
GCDWebServer


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!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>