A PHP script can be used with a HTML form to allow users to upload files to the server. Initially files are uploaded into a temporary directory and then relocated to a target destination by a PHP script.
This feature lets people upload both text and binary files. With PHP’s authentication and file manipulation functions, you have full control over who is allowed to upload and what is to be done with the file once it has been uploaded.
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.
In this article, I’ll explain the basics of file upload in PHP. Firstly, we’ll go through the PHP configuration options that need to be in place for successful file uploads. Following that, we’ll develop a real-world example of how to upload a file.
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.