Loading...
 
Gmail / Facebook Style Chat Application


Posted: Monday 1st of October 2012

Upload Image Files without Refreshing Page using Ajax and Jquery



This tutorial will teach you how to upload your image files or any type of file to your servers without refreshing your website page.

The languages used for this tutorial are PHP, Ajax and Jquery. The program is written a way that any one can easily understand and customize.

Ajax and Jqery have made life easier for us all. We no longer need to refresh our website pages while uploading files to our servers and this is cool guys.




PHP Code

<?php
$upload_location = "upload_folder/";
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
      $name = $_FILES['vasPhoto_uploads']['name'];
      $size = $_FILES['vasPhoto_uploads']['size'];

      $allowedExtensions = array("jpg","jpeg","gif","png");
      foreach ($_FILES as $file) {
      if ($file['tmp_name'] > '' && strlen($name)) {
      if (!in_array(end(explode(".", strtolower($file['name']))), $allowedExtensions)) {
            echo '<div class="notice" style="width:500px;">Sorry, you attempted to upload an invalid file format. <br>Only jpg, jpeg, gif and png image files are allowed. Thanks.</div><br clear="all" />';
      }
      else {
            if($size<(1024*1024))
            {
                  $actual_image_name = "default".'.gif'; // This could be a random name such as rand(125678,098754).'.gif'; but i have used a default name just for demo purpose
                  $dirnameas = $upload_location.$actual_image_name; //Get and delete old image file before uploading a new one if necessary by you otherwise, remove this
                  @chmod($dirnameas,0777);
                  @unlink($dirnameas);

                  if(move_uploaded_file($_FILES['vasPhoto_uploads']['tmp_name'], $upload_location.$actual_image_name)) {
                        //Run your SQL Query here to insert the new image file named $actual_image_name if you deem it necessary
                        echo '<span class="uploadeFileWrapper"><img src="'.$upload_location.$actual_image_name.'" width="150" height="100"></span><br clear="all" /><br clear="all" />';
                  }
                  else {
                        echo "<div class='notice' style='width:500px;'>Sorry, Your Image File could not be uploaded at the moment. <br>Please try again or contact the site admin if this problem persist. Thanks.</div><br clear='all' />";
                  }
            }
            else {
                  echo "<div class='notice' style='width:400px;'>File exceeded 1MB max allowed file size. <br>Please upload a file at 1MB in size to proceed. Thanks.</div><br clear='all' />";
            }
      }
}
else {
      echo "<div class='notice' style='width:400px;'>You have just canceled your file upload process. Thanks.</div><br clear='all' />";
}
}
}

?>


Ajax and Jquery
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="file_uploads.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
      $('#vasPhoto_uploads').live('change', function() {
           $("#vasPLUS_Programming_Blog_Form").vPB({
            beforeSubmit: function() {
                  $("#vasPhoto_uploads_Status").show();
                  $("#vasPhoto_uploads_Status").html('');
                  $("#vasPhoto_uploads_Status").html('<div style="" align="center"><font style="font-family: Verdana, Geneva, sans-serif; font-size:12px; color:black;">Upload</font> <img src="loading.gif" alt="Upload...." align="absmiddle" title="Upload...."/></div><br clear="all">');
            },
            url: 'vasPLUSfileUploads.php',
            success: function(response) {
                  $("#vasPhoto_uploads_Status").html($(response).fadeIn(2000));
            }
      }).submit();
      });
});
</script>

HTML Code

<center>
<div align="left" style="width:600px; border:8px solid #F6F6F6;padding:10px;">
<br clear="all" />

<div id="vasPhoto_uploads_Status" align="center" style="font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black; line-height:25px;"></div>
<center>
<div style="width:350px" align="center">
<form id="vasPLUS_Programming_Blog_Form" method="post" enctype="multipart/form-data" action="javascript:void(0);" autocomplete="off">
<div style="padding:10px; padding-top:18px;float:left;font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black; width:100px;" align="left">Browse Photo:</div>
<div style="padding:10px;float:left; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black; width:200px;" align="left">
<div class="vasplusfile_adds"><input type="file" name="vasPhoto_uploads" id="vasPhoto_uploads" style="opacity:0;-moz-opacity:0;filter:alpha(opacity:0);z-index:9999;width:90px;padding:5px;cursor:default;" /></div>
</div><br clear="all">
</form>
</div>
</center>
<br clear="all" />
</div>
</center>




That's it guys...



Views Today: 3
Total Views: 717

Comments
0
OUR OBJECTIVE

Our objective is to reach a place where our services will be highly regarded by businesses from various industrial domains for building their innovative busines solutions with our cutting-edge technological expertise, interactive designs and uncompromised quality.

OUR MISSION

We aspire to help businesses ranging from startups to enterprises, who reach out to us with their requirements, in achieving great lengths, expanding their reach, upscaling their products, and generate a large user-base with our outstanding and cost-effective services.

Copyright © 2011 - 2024 | All Rights Reserved