HTML AJAX image upload & preview with JQuery and PHP

In this post I will show you how to create a simple HTML form to make an AJAX image upload using jQuery and PHP. In this way you can build a form which doesn’t require postbacks to upload a file.

Let’s start creating the main PHP page by placing the necessary markup. I’ll call this page “upload.php”. The code is here:

<?php
   /*
   *	https://www.thedummyprogrammer.com
   */

   $urlPreview = "";
	
   if (isset($_POST['hidFileId']))
   {
     $hidFileIdValue = $_POST['hidFileId'];
     $urlPreview = "src='/testupload/uploadedfiles/" . $_POST['hidFileId']."'";
   }
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Test upload</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="upload.js"></script>
  </head>

  <body>
    <form action="upload.php" method="post">
      <div>Select a file to upload</div>
        <div>
          <input id="fileUpload" type="file" />
          <input id="btnUpload" type="button" value="Upload" />
          <input id="hidFileId" name="hidFileId" type="hidden" value="<?php echo $hidFileIdValue ?>" />
        </div>
      <div>
        <img id="imgPreview" <?php echo $urlPreview ?> style="width:400px;height:400px" />
      </div>
      <div><input type="submit" value="Post form" /></div>
    </form>
  </body> 
</html>

Note that in the <head> section the page references two scripts:

the jQuery library using the link provided by Google
a file called “upload.js” that I’m going to create and explain below

I want to show the preview of the image as soon as the file is uploded, and I need a way to reference the file uploaded from PHP side after pressing the submit button. This is why I added an hidden input control to store the file name. This hidden input is populated with the name of the file when jQuery completes the ajax request.

Now let’s create the code for the file “upload.js”:

/*
* https://www.thedummyprogrammer.com
*/

$(document).ready(function() {
  $('#btnUpload').click(function() {
    var fileUpload = document.getElementById('fileUpload');
    var formData = new FormData();

    if (fileUpload.files.length == 0) {
      alert('Select a file!');
      return;
    }

    formData.append("fileUpload", fileUpload.files[0], fileUpload.files[0].name);

    $.ajax({
      url: 'uploadhandler.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,

      success: function(data, textStatus, jqXHR) {
        fileUpload.value = null;

        $('#imgPreview').attr('src', '/testupload/uploadedfiles/' + data.fileId);
        $('#hidFileId').val(data.fileId); 
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert('An error occurred uploading the file!');
      }
    });
  });
});

In the script above an event handler is attached to the click event of button “btnUpload”. An object of type “FormData” is instantiated and the file selected by the user is added to the collection of the object formData.

Then the file is submitted to the server using an ajax call made with jQuery.

The name of the file returned by the ajax request is used to set the “src” attribute of the image to show the preview.

Note the url parameter of the ajax request: it refers to “uploadhandler.php”. This is the last file we need to complete the job, and it is described below:

<?php
/*
* https://www.thedummyprogrammer.com
*/

$result = null;

try
{
  $fileId = uniqid() . "-" . $_FILES["fileUpload"]["name"];
  move_uploaded_file($_FILES['fileUpload']['tmp_name'], __DIR__ . "/uploadedfiles/" . $fileId); 
  $result = array('status' => 'ok', 'fileId' => $fileId); 
}
catch (Exception $ex)
{
  $result = array('status' => 'error', 'fileId' => null); 
}

header('Content-Type: application/json');
echo json_encode($result);

That’s it, you now have an ajax upload.

There are more things to care about: for example security or the possibility to remove an uploaded file or upload multiple files.

But for now let’s finish here… 😉

Click to download the code.

Related Posts