AJAX file upload Script
(No Ratings Yet)
Loading ...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+
Source code for index.html
<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>
<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>
Java Source Code:
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);
}
}
}
Demo: http://www.webtoolkit.info/demo/javascript/aim/demo.html
Related Listings:
- Ajax Style File upload for .Net If you visit Asp.net Ajax Forum, you will find hundreds...
- Asynchronous upload – Like AJAX Here a simple function to asynchronous upload using iframe. Dont...
- Ajax File Upload using JQuery Script that simplifies how you traverse HTML documents, handle events, perform...
- uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...
- Multiple File Upload – JQuery The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin...
Do you like this post?
Tags:
1 Comment »
RSS feed for comments on this post. TrackBack URL
Leave a comment
|
|
|
|
February 16th, 2010 at 11:10 am
Hi,
I am using Ajax file upload.it’s working fine in IE,FF,Opera,except Safari.I am facing problem on safari browser.Could you please tell me how to solve this issueon safari browser?
Thanks,
Venkat