Skip to main content

Ajax Image Upload with jQuery

Today to I am going to show you how it is easy to implement AJAX image upload with jQuery. For doing this I used jQuery Form plugin with Simple PHP File Upload example script and some simple jQuery code.
Live Demo Download Source
Simple HTML file uploading form for upload image
<!-- loader.gif -->
<img style="display:none" id="loader" src="loader.gif" alt="Loading...." title="Loading...." />
<!-- simple file uploading form -->
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">
<!-- preview action or error msgs -->
<div id="preview" style="display:none"></div>

jQuery Code
Import jQuery & jQuery Form library and jQuery form implantation
<script type="text/javascript" src="js/jquery.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
$(document).ready(function() {
  var f = $('form');
  var l = $('#loader'); // loder.gif image
  var b = $('#button'); // upload button
  var p = $('#preview'); // preview area{
    // implement with ajaxForm Plugin
      beforeSend: function(){;
        b.attr('disabled', 'disabled');
      success: function(e){
      error: function(e){

PHP Code
Server side file upload handeler
$valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
$max_size = 200 * 1024; // max file size
$path = 'uploads/'; // upload directory

  if( ! empty($_FILES['image']) ) {
    // get uploaded file extension
    $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
    // looking for format and size validity
    if (in_array($ext, $valid_exts) AND $_FILES['image']['size'] < $max_size) {
      $path = $path . uniqid(). '.' .$ext;
      // move uploaded file from temp to uploads directory
      if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) {
        echo "<img src='$path' />";
    } else {
      echo 'Invalid file!';
  } else {
    echo 'File not uploaded!';
} else {
  echo 'Bad request!';

Popular posts from this blog

Multiple File Upload with Progress Bar using PHP & jQuery

Some days age I have created a post that deals with How we can upload file with progress bar using php and jQuery . Some of my readers asked me how we can upload multiple files with progress bar. In this post I am going to show you how we can upload multiple files with progress bar. We can upload multiple files with progress bar exactly same way as I shown previous. But we need to do some modification with our file upload form and our php script to handle multiple files.

File Upload with Progress Bar using jQuery and PHP

In this post you will learn how to create a AJAX file uploading system with progress bar using jQuery and PHP. For this purpose we will going to use jQuery Form Plugin . It is a easy to use and powerful jQuery AJAX form submitting plugin. It supports XMLHttpRequest Level 2 and iframe file transportation. That's why it will work for both old and new browsers.

Multiple File Upload with PHP

Sometimes we need to allow our users to upload multiple file upload. On my previous post I was shown the basic of simple file upload with PHP. Today I am going to show you how to allow users to upload multiple files. It is almost similar like simple file upload but we need to do some modification with html markup and php code . multiple attribute is needed to add on the html markup. Major web browsers like Firefox, Chrome, Safari and IE 9+ support this attribute. Now I am going to show you how to upload multiple file with PHP and basic HTML form.