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
HTML Code
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">
</form>
<!-- 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>
<script>
$(document).ready(function() {
  var f = $('form');
  var l = $('#loader'); // loder.gif image
  var b = $('#button'); // upload button
  var p = $('#preview'); // preview area

  b.click(function(){
    // implement with ajaxForm Plugin
    f.ajaxForm({
      beforeSend: function(){
        l.show();
        b.attr('disabled', 'disabled');
        p.fadeOut();
      },
      success: function(e){
        l.hide();
        f.resetForm();
        b.removeAttr('disabled');
        p.html(e).fadeIn();
      },
      error: function(e){
        b.removeAttr('disabled');
        p.html(e).fadeIn();
      }
    });
  });
});
</script>

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

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  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!';
}
?>

Comments

  1. Thanks can you make it to upload multiple images

    ReplyDelete
  2. Hi. First of all THANK YOU!!!! Great job. I have a little problem though. I changed the script a little bit and added an a href link to trigger the input file element because i dont want it to be seen in page. Also the form is submitted immediately when the user selects an image file to upload. So, all this works fine in FF and IE10 but not in IE8 (have no idea about IE9 etc). Do you think you have any ideas on that? Thank you very much in advance..

    ReplyDelete
  3. Hello. This is awesome. Only one problem. It doesn't work with phones! Any idea why?

    ReplyDelete
  4. Hi the zip file corrupted ...Please reupload

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. yah! this article is very nice only, if you want any one more article same like this visit http://scriptquery.blogspot.in/2014/11/jquery-image-upload-preview.html i think you may get solution.

      Delete
  6. Awesome. Thanks a lot for the simplest cool one!!

    ReplyDelete
  7. ✔ Số 111 A1 - Nguyễn Quý Ðức - Thanh Xuân - Hà Nội
    ✔ Phụ Trách : Bác sỹ chuyên khoa Y Học Cổ Truyền Nguyễn Hằng.
    dịch vụ làm bhxh cho dn
    dịch vụ dọn dẹp sổ sách kế toán
    dịch vụ báo cáo tài chính tp hcm
    Chân dung DÂN CHƠI THẾ KỶ 20!!!
    Bao nhiêu bác còn nhớ hình ảnh này?

    ReplyDelete
  8. This is one of the cult game now, a lot of people enjoy playing them . Also you can refer to the game :
    animal jam 2 | five nights at freddys 2 | hotmail login

    ReplyDelete
  9. This information should reach more people. Beti

    ReplyDelete

Post a Comment

Popular posts from this blog

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.

Live Comment System with jQuery Ajax PHP and MySQL

Recently I have been made a post that focused on how to submit form without page refreshing. That post shows the basic functionality of using jQuery Ajax. On the same follow this post will describe how we can create a comment system to post an instant comment without page refreshing. Let's start...

Resize Image While Uploading with PHP

On my previous post I was shown an example how to upload file with php and html. It was based on php simple image upload functionality. Today I am going to show you little bit advance of image uploading. Suppose if you run a website and want to allow users to upload image files than you need to think little bit about server's space and bandwidth. For this purpose you need to do some optimization with image files. Image resize while uploading is one of them. All major website do it in the same way. If a user uploads a 5mb image file they resize it in different sizes and store on there server. It helps them to seed up there website and reduce there budget. Now take a look, how we can do it ourself.