demo.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Uploader</title>
  <script type="text/javascript" src="http://static.alipayobjects.com/seajs/seajs/2.1.1/sea.js"></script>
  <script>
  /**
  * The Sea.js plugin for loading CommonJS file
  * https://github.com/seajs/seajs-wrap
  * just for debug enviroment
  */
  !function(){function a(a,b){var d=c.ActiveXObject?new c.ActiveXObject("Microsoft.XMLHTTP"):new c.XMLHttpRequest;return d.open("GET",a,!0),d.onreadystatechange=function(){if(4===d.readyState){if(d.status>399&&d.status<600)throw new Error("Could not load: "+a+", status = "+d.status);b(d.responseText)}},d.send(null)}function b(a){a&&/\S/.test(a)&&(c.execScript||function(a){(c.eval||eval).call(c,a)})(a)}var c=window,d={};seajs.on("resolve",function(a){var c=a.id;if(!c)return"";var e=c.match(/[^?]+(\.\w+)?(\?.*)?$/),f=seajs.resolve(c,a.refUri);if(e&&(".js"===e[1]||!e[1])){var g=e[2]||"";d[f]=function(a,c){var d,e=/define\(.*function\s*\(\s*require\s*(.*)?\)\s*\{/;d=e.test(c)||g.indexOf("nowrap")>0?c:"define(function(require, exports, module) {\n"+c+"\n})",b(d)}}a.uri=f}),seajs.on("request",function(b){var c=d[b.uri];c&&(a(b.requestUri,function(a){c(b.uri,a),b.onRequest()}),b.requested=!0)}),define("seajs/seajs-wrap/1.0.0/seajs-wrap",[],{})}();
  </script>
  <style type="text/css">
    .container {
      margin: 0 auto;
      width: 80%;
      max-width: 680px;
      padding: 60px 0;
    }
  </style>
  <script type="text/javascript">
    seajs.config({
      alias: {'jquery': '/spm_modules/jquery/1.7.2/jquery'}
    });
  </script>
</head>
<body>
<div class="container">
  <h1>Uploader DEMO</h1>

  <p>This is a project by <a href="http://lepture.com">Hsiaoming Yang</a>.</p>

  <h2>Select and Upload</h2>

  <div class="cell">
    <button id="uploader-1" href="#">Upload</button>
  </div>

  <h2>Select then upload</h2>

  <div class="cell">
    <p>
      <button id="uploader-2" href="#">Select</button>
      <span id="upload-2-text"></span></p>
    <p>
      <button id="submit-2" href="#">Upload</button>
    </p>
  </div>
  <h2>Only upload image</h2>

  <div class="cell">
    <button id="uploader-3" href="#">Upload</button>
  </div>

  <h2>Disable upload</h2>
  <div class="cell">
    <p><button id="uploader-4" href="#">Select</button>
      <span id="upload-4-text"></span></p>
    <p><button id="disable" href="#">Disable</button><button id="submit-4" href="#">Upload</button></p>
  </div>
</div>
<script type="text/javascript">
  seajs.use(['jquery', '/index'], function($, Uploader) {
    new Uploader({
      trigger: '#uploader-1',
      action: '/',
      progress: function() {
        console.log(arguments);
      }
    }).success(function(data) {
      alert(data);
    });

    var uploader = new Uploader({
      trigger: '#uploader-2',
      action: '/'
    }).change(function(filename) {
      $('#upload-2-text').text(filename);
    }).success(function(data) {
      alert(data);
    });
    $('#submit-2').click(function() {
      uploader.submit();
      return false;
    });

    new Uploader({
      trigger: '#uploader-3',
      accept: 'image/*',
      action: '/'
    }).success(function(data) {
      alert(data);
    });

    var uploaderCanBeDisabled = new Uploader({
      trigger: '#uploader-4',
      action: '/'
    }).change(function(filename) {
      $('#upload-4-text').text(filename);
    }).success(function(data) {
      alert(data);
    });
    $('#disable').click(function() {
      var txt = $(this).html();
      uploaderCanBeDisabled[txt === 'Disable'? 'disable': 'enable']();
      $(this).html(txt === 'Disable'? 'Enable': 'Disable');
      return false;
    });

    $('#submit-4').click(function() {
      uploaderCanBeDisabled.submit();
      return false;
    });
  });
</script>
</body>
</html>