Gmail / Facebook Style Chat Application
Details Live Demo Download

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

$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 {
                  $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

                  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() {
            beforeSubmit: function() {
                  $("#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) {


<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>
<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">
<br clear="all" />

That's it guys...



Announcement x
Dear Users and Clients,

This is to inform you that we have recently updated our website generally.

If you experience any problem viewing any part of this website or if you notice that any of our scripts or tutorials are not functioning properly as should be, please click on the Contact Link at the top of this page to report the issue to us.

Our priority is to give you the best of service!

Thank You,
The Vasplus Team