Top Menu
Main Menu
Menu
Scripts
AJAX file upload
First include this library at the top of your code (you can find the library in the source code section of this page).
Do it in <head> tag. After loading the library you can write your code.
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>
<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);
}
}
}
*
* 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);
}
}
}
Website: http://www.webtoolkit.info/ajax-file-upload.html
Demo: http://www.webtoolkit.info/demo/javascript/aim/demo.html
Sender: = Justas Vinevicius
Demo: http://www.webtoolkit.info/demo/javascript/aim/demo.html
Sender: = Justas Vinevicius
Hit: 8951.
Rating
Reviews
Be the first to review this listing!
Write Review