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+.

CODE:-
<script src="webtoolkit.aim.js" type="text/javascript"><!--mce:0--></script>
                <script type="text/javascript"><!--mce:1--></script>
 <form action="index.php" method="post">
 <div><label>Name:</label>
<input name="form[name]" type="text" /></div>
 <div><label>File:</label>
<input name="form[file]" type="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):
</div>
SOURCE CODE FOE 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 = '';
                                document.body.appendChild(d); 
                                var i = document.getElementById(n);
                                if (c &amp;&amp; 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 &amp;&amp; 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

print_r($_REQUEST['form']);

  Modified On Nov-19-2017 05:54:46 PM

Leave Comment