Uploading File Without Refreshing Page in PHP

0
83

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.

  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
(Visited 137 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here