Upload an Image Using Iframe & Js


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>

Advertisements

One comment on “Upload an Image Using Iframe & Js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s