반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

ㄴrㅎnㅂrㄹrㄱi

Ajax Upload 본문

프로그래밍/JAVASCRIPT

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);
    }
  }

}
반응형

'프로그래밍 > JAVASCRIPT' 카테고리의 다른 글

DHTML Color Picker  (0) 2008.12.22
[사이트 소개] Open Source Ajax  (0) 2008.12.22
자동완성 스크립트  (0) 2008.12.22
[사이트 소개] Dynamic Drive  (0) 2008.12.22
[사이트 소개] DHTML eXtensions - professional AJAX components for advanced Web UI.  (0) 2008.12.22
'프로그래밍/JAVASCRIPT' Related Articles more
Comments