<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>
[ Infomation ]
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.
Tested in IE5.5+, FF1.0+, OP 8.0+
|