Home > DeveloperSection > Articles > Ajax File Upload in PHP

Ajax File Upload in PHP


PHP PHP 
Ratings:
0 Comment(s)
 2447  View(s)
Rate this:

Ajax File Upload in PHP

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


Don't want to miss updates? Please click the below button!

Follow MindStick