Ajax Upload

님투 2008. 12. 22. 19:08

ajax_upload.zip

Ajax Upload

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Iframe Ajax</title>
  <script type="text/javascript" src="webtoolkit.aim.js"></script>
  <script type="text/javascript">
    function startCallback() {
      // make something useful before submit (onStart)
      return true;
    }

    function completeCallback(response) {
      // make something useful after (onComplete)
      document.getElementById('nr').innerHTML = parseInt(document.getElementById('nr').innerHTML) + 1;
      document.getElementById('r').innerHTML = response;
    }
  </script>
</head>

<body>

  <form action="" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})">
    <div><label>Name:</label> <input type="text" name="form[name]" /></div>
    <div><label>File:</label> <input type="file" name="form[file]" /></div>
    <div><input type="submit" value="SUBMIT" /></div>
  </form>

  <hr/>

  <div># of submited forms: <span id="nr">0</span></div>
  <div>last submit response (generated by form action - index.php file): <pre id="r"></pre></div>

</body>
</html>

---------------------------------------

/**
*
*  AJAX IFRAME METHOD (AIM)
*  http://www.webtoolkit.info/
*  webtoolkit.aim.js
**/

AIM = {

  frame : function(c) {

    var n = 'f' + Math.floor(Math.random() * 99999);
    var d = document.createElement('DIV');
    d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
    document.body.appendChild(d);

    var i = document.getElementById(n);
    if (c && typeof(c.onComplete) == 'function') {
      i.onComplete = c.onComplete;
    }

    return n;
  },

  form : function(f, name) {
    f.setAttribute('target', name);
  },

  submit : function(f, c) {
    AIM.form(f, AIM.frame(c));
    if (c && typeof(c.onStart) == 'function') {
      return c.onStart();
    } else {
      return true;
    }
  },

  loaded : function(id) {
    var i = document.getElementById(id);
    if (i.contentDocument) {
      var d = i.contentDocument;
    } else if (i.contentWindow) {
      var d = i.contentWindow.document;
    } else {
      var d = window.frames[id].document;
    }
    if (d.location.href == "about:blank") {
      return;
    }

    if (typeof(i.onComplete) == 'function') {
      i.onComplete(d.body.innerHTML);
    }
  }

}