Karuppasamy

Asynchronous File Upload with PHP Javascript iFrame

Let first see what is needed to display the application, let name the application display page as index.php. Here the code that you need to add.

Paste the content in head tag in Index.php

iframe {
border-width: 0px;
height: 60px;
width: 400px;
vertical-align:top;
}

iframe.hidden {
visibility: hidden;
width:0px;
height:0px;
}

Paste these coding in Body tag in Index.php

//dont forget to put the list div

<1body>

<1div>

<1iframe src=”‘upload.php’” frameborder=””” scrolling=”‘0′”><1/iframe>

<1/div>

<1div><1/div> //dont forget to put the list div

<1/body>

Now let see the real magic of this application. As you might have notice from the iframe sources code the file that we be using to upload the file is upload.php.

Create a table in mysql

CREATE TABLE upload (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(30) NOT NULL,
type VARCHAR(30) NOT NULL,
size INT NOT NULL,
content LONGBLOB NOT NULL,
PRIMARY KEY(id)
);

Paste the content in upload.php

//Remove 1 in the tag
@$ftmp = $_FILES['image']['tmp_name'];
@$oname = $_FILES['image']['name'];
@$fname = $_FILES['image']['name'];
@$fsize = $_FILES['image']['size'];
@$ftype = $_FILES['image']['type'];

if(IsSet($ftmp)) :
$fp = fopen($ftmp, ‘r’);
$content = fread($fp, filesize($ftmp));
$content = addslashes($content);
fclose($fp);
// include your database configuration & connection
$new_file_name = time().”_”.$fname;
$query = “INSERT INTO file_upload (name, type, size, content)
VALUES(‘”.$new_file_name.”‘, ‘”.$ftype.”‘, “.$fsize.”, ‘”.$content.”‘)”;
$result = mysql_query($query);
$file_id = mysql_insert_id();
?1>//Remove 1 in the tag

<1html>

<1head>

<1script>

var par = window.parent.document;
var list = par.getElementById(‘list’);
var fileid = par.createElement(‘div’);
var inpid = par.createElement(‘input’);
var imgdiv = list.getElementsByTagName(‘div’)[];
var image = imgdiv.getElementsByTagName(‘img’)[0];

imgdiv.removeChild(image);
list.removeChild(imgdiv);

fileid.setAttribute(‘id’, ‘upfile’);//Remove 1 in the php tag
fileid.innerHTML = ”;
inpid.type = ‘hidden’;
inpid.name = ‘filename[]‘;
inpid.value = ”;//Remove 1 in the php tag
list.appendChild(fileid);
fileid.appendChild(inpid);

<1/script>

<1/head>

<1/html>

<1?php style=”font-weight: bold;”>//remove 1 in php tag
exit();
endif;
?1>//remove 1 in php tag

<1html>

<1head>

<1script>

function upload(){
// hide old iframe
var par = window.parent.document;
var num = par.getElementsByTagName(‘iframe’).length – 1;
var iframe = par.getElementsByTagName(‘iframe’)[num];
iframe.className = ‘hidden’;
// create new iframe
var new_iframe = par.createElement(‘iframe’);
new_iframe.src = ‘upload.php’;
new_iframe.frameBorder = ‘0′;
par.getElementById(‘iframe’).appendChild(new_iframe);
// add image progress
var list = par.getElementById(‘list’);
var new_div = par.createElement(‘div’);
var new_img = par.createElement(‘img’);
new_img.src = ‘indicator.gif’;
new_img.className = ‘load’;
new_div.appendChild(new_img);
list.appendChild(new_div);
// send
var imgnum = list.getElementsByTagName(‘div’).length – 1;
document.iform.imgnum.value = imgnum;
document.iform.submit();

<1/script>

<1style>

body {vertical-align:top;}

<1/style>

<1/head>

<1body>

<1form action=”" method=”post” enctype=”multipart/form-data”>

<1input onchange=”upload()”>

<1input>

<1/form>

<1/html>