ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Uploading a File without Refreshing the Page in PHP

uploadanimage

Today, I’m going to teach you how to upload an image without refreshing the 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.

 

Let’s begin:

 

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

  1. <!-- extension bootstrap css -->
  2. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  3.  
  4. <h1 align="center">Uploading image without loading</h1>
  5. <!-- index.php could be any script server-side for receive uploads. -->
  6. <div class="container">
  7. <div class="row">
  8. <form rol="form">
  9. <div class="form-group">
  10. <label>Upload an Image :</label>
  11. <input type="file" name="photo" id ="photo" /> <br/>
  12. <input type="button" value="upload" onClick="fileUpload(this.form,'upload.php','upload'); return false;" class="btn btn-primary " >
  13. </div>
  14. <!-- display the message -->
  15. <div id="upload" class="col-md-6 col-md-offset-3"></div>
  16. </form>
  17. </div>
  18.  
  19. </div>

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

javascript

  1. function fileUpload(form, url_destination, msg_id) {
  2. // Create an iframe...
  3. var iframe = document.createElement("iframe");
  4. //set the properties of an iframe.
  5. /* set the id */
  6. iframe.setAttribute("id", "upload_iframe");
  7. /* set the name */
  8. iframe.setAttribute("name", "upload_iframe");
  9. /* set the width*/
  10. iframe.setAttribute("width", "0");
  11. /* set the height */
  12. iframe.setAttribute("height", "0");
  13. /* set the border */
  14. iframe.setAttribute("border", "0");
  15. /* Add the iframe to the document ...*/
  16. form.parentNode.appendChild(iframe);
  17. /* set the name of an iframe */
  18. window.frames['upload_iframe'].name = "upload_iframe";
  19. /* get an iframe id */
  20. iframeId = document.getElementById("upload_iframe");
  21. /* Add event handler ...*/
  22. var eventHandler = function () {
  23.  
  24. if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
  25. else iframeId.removeEventListener("load", eventHandler, false);
  26.  
  27. /* Message from server...*/
  28. if (iframeId.contentDocument) {
  29. msg = iframeId.contentDocument.body.innerHTML;
  30. } else if (iframeId.contentWindow) {
  31. msg = iframeId.contentWindow.document.body.innerHTML;
  32. } else if (iframeId.document) {
  33. msg = iframeId.document.body.innerHTML;
  34. }
  35.  
  36. /* set the message in the document */
  37. document.getElementById(msg_id).innerHTML = msg;
  38.  
  39. /*Delete an iframe to the document...*/
  40. setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
  41. }
  42.  
  43. if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
  44. if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);
  45.  
  46. /*Set properties of form...*/
  47. form.setAttribute("target", "upload_iframe");
  48. form.setAttribute("action", url_destination);
  49. form.setAttribute("method", "post");
  50. form.setAttribute("enctype", "multipart/form-data");
  51. form.setAttribute("encoding", "multipart/form-data");
  52. /* set a gif loader before submitting the form */
  53. document.getElementById(msg_id).innerHTML = "<img src ='img/loader.gif' />";
  54.  
  55. /* Submit the form...*/
  56. form.submit();
  57. }

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

  1. <!-- extension bootstrap css -->
  2. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  3. <?php
  4. /* set the path where you put the image */
  5. $img_path = "img/";
  6. /* set the image file format */
  7. $img_format = array(
  8. "jpg",
  9. "png",
  10. "gif",
  11. "bmp"
  12. );
  13. if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
  14. /* set the name of the file */
  15. $file_name = $_FILES['photo']['name'];
  16. /* set the size of the file */
  17. $file_size = $_FILES['photo']['size'];
  18. /* checking if the file name exist */
  19. if (strlen($file_name)) {
  20. list($txt, $ext) = explode(".", $file_name);
  21. if (in_array($ext, $img_format)) {
  22. /* checking the size to be */
  23. if ($file_size < (1024 * 1024)) {
  24. $img_name = time() . substr(str_replace(" ", "_", $txt), 5) . "." . $ext;
  25. $tmp_name = $_FILES['photo']['tmp_name'];
  26. /* checking if the file is uploaded or not */
  27. if (move_uploaded_file($tmp_name, $img_path . $img_name)) {
  28. echo "<img src='img/" . $img_name . "' class='img-responsive' />";
  29. } else {
  30. echo "Uploading field.";
  31. }
  32. } else {
  33. echo "<h1>Image file size is not valid.</h1>";
  34. }
  35. } else {
  36. echo "<h1>Uploaded file is not an image.</h1>";
  37. }
  38. } else {
  39. echo "<h1>Please select an image..!</h1>";
  40. }
  41. }
  42. ?>

Complete Sourcecode available here.

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!