articles

Home / DeveloperSection / Articles / Ajax File Upload in PHP

Ajax File Upload in PHP

Andrell Daniels 4420 09-Jan-2013

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']);


Updated 31-Mar-2019
I am student.

Leave Comment

Comments

Liked By