Uploading File Without Refreshing Page in PHP

0
1131

Today, I’m going to teach you about “Uploading File Without Refreshing Page”  in PHP.  I will create an iframe in the document using javascript. With this, you can dynamically load and display an image without reloading the rest of the page which speeds up the process.

uploadanimage

Uploading File Without Refreshing Page

Let’s begin:

 

1. Create a file and name it “php”. This page will appear in the first load.

[html]

<!– extension bootstrap css –>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>

<h1 align=”center”>Uploading image without loading</h1>
<!– index.php could be any script server-side for receive uploads. –>
<div class=”container”>
<div class=”row”>
<form rol=”form”>
<div class=”form-group”>
<label>Upload an Image :</label>
<input type=”file” name=”photo” id =”photo” /> <br/>
<input type=”button” value=”upload” onClick=”fileUpload(this.form,’upload.php’,’upload’); return false;” class=”btn btn-primary ” >
</div>
<!– display the message –>
<div id=”upload” class=”col-md-6 col-md-offset-3″></div>
</form>
</div>

</div>

[/html]

2. Create a javascript function for uploading an image without refreshing that page and put this under the html code.

[javascript]

function fileUpload(form, url_destination, msg_id) {
// Create an iframe…
var iframe = document.createElement(“iframe”);
//set the properties of an iframe.

form.submit();
}
[/javascript]

3. Create a file and name it “php”.

[php]

<!– extension bootstrap css –>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>
<?php

if (move_uploaded_file($tmp_name, $img_path . $img_name)) {
echo “<img src=’img/” . $img_name . “‘ class=’img-responsive’ />”;
} else {
echo “Uploading field.”;
}
} else {
echo “<h1>Image file size is not valid.</h1>”;
}
} else {
echo “<h1>Uploaded file is not an image.</h1>”;
}
} else {
echo “<h1>Please select an image..!</h1>”;
exit;
}
}
?>

[/php]

Complete Sourcecode available here.

Looking for more source code? Type your keyword here here!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.