jQuery AJAX Image Upload Thumbnail Example

I’ve had quite a lot of requests for how to upload images using Ajax and show a thumbnail so I decided to do a quick demo to show you how it can be done. The Script facilitates the process of uploading an image via Ajax and using PHP to create a thumbnail, return the image source and display to the user as a thumbnail of the image uploaded. All without the page reloading. To help you understand how it works I’ve commented on a few of the key parts below.

View Demo View Project on Git

ajax-image-upload

The Upload Image Function

--ADVERTISEMENT--

This function sends the image to the backend and receives back data about the uploaded image and it’s created thumbnail. It uses the ajaxFileUpload function.

uploadImage: function()
{
    var _this = this,
        $imgInput = $('#image-upload');

    this.cache.$imgPreview.hide();
    this.cache.$imgOriginal.hide();
    $('.img-data').remove(); //remove any previous image data

    $.ajaxFileUpload(
    {
        url: _this.settings.uploadImageUrl,
        secureuri: false,
        fileElementId: 'image-upload',
        dataType: "json",
        success: function(data)
        {
            console.log(data);
            _this.cache.$imgPreview.attr('src',data.thumb.img_src);
            _this.cache.$imgOriginal.attr('src',data.master.img_src);

            //show img data
            _this.cache.$imgPreview.after('<div class="img-data">'+$.objToString(data.thumb)+'</div>');
            _this.cache.$imgOriginal.after('<div class="img-data">'+$.objToString(data.master)+'</div>');
            $('#remove-image-upload').show();
        },
        error: function(xhr, textStatus, errorThrown)
        {
            console.log(xhr, textStatus, errorThrown + 'error');
            return false;
        },
        complete: function()
        {
            //hide loading image
            _this.cache.$form.find('.loading').hide();
            _this.cache.$imgPreview.show();
            _this.cache.$imgOriginal.show();
        }
    });
}

The Image Thumbnail

The image thumbnail src gets updated with the new thumbnail image src once the image has been uploaded.

<!-- Generated Image Thumbnail -->
<img alt="image preview " src="img/350x150.jpg" id="image-thumb"/>

Example Form Submit

The form data can be grabbed as normal and the thumbnail src is added to the data which is sent as part of the form submit.

submitForm: function()
{
    /* example of submitting the form */
    var $theForm = $('#submit-plugin-form'),
        formData = $theForm.serialize(); //get form data

    //include video thumb src
    formData += '&image-thumb=' + $('#image-thumb').attr('src');
    $theForm.find(':input').attr('disabled', 'disabled'); //lock form

    $.ajax(
    {
        type: "POST",
        url: 'php/submitForm.php',
        dataType: "json",
        data: formData,
        success: function(ret)
        {
            //...
        },
        error: function(xhr, textStatus, errorThrown)
        {
            console.log(xhr, textStatus, errorThrown + 'error');
            return false;
        }
    });
}

The backend PHP Script

I have written a backend script in PHP which receives an image from front end and uploads it, creates a thumbnail and returns both the master and thumb image info as JSON.
View PHP Script.

Folder Structure

The uploaded image and thumb are stored in a temp folder then when the form is submitted the images are moved and renamed into the main images folder.
folder-structure

Naming of Files

The temp files are named using a timestamp and thumbs with their dimension.
image-filenames

Security

You’ll need to make sure the images directory has writable permissions 774 should be high enough.