in Experiments
Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code.
You need to create a form with file fields you wish to upload and define “onsubmit” event. Look at the example below how to do that.
Tested in IE5.5+, FF1.0+, OP 8.0+
DEMO
Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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="index.php" 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>
Source code for webtoolkit.aim.js
/** * * AJAX IFRAME METHOD (AIM) * http://www.webtoolkit.info/ * **/ 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); } } }
Source code for index.php
<?php print_r($_REQUEST['form']); ?>