Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

Facebook Style Image Upload in Comment Box using PHP, jQuery & MYSQL


My readers continuously asked me to work on Facebook Style Image Upload in comment box. So thought to share this wonderful tutorial here using PHP, MYSQL & jQuery. How to upload images in Comment box like Facebook is the best implemention feature to interact with users.

I felt that I haven’t included this feature in my wallscript & I thought this is the right time to share this cool feature with my readers 🙂

I have used my facebook wallscript 2.0 here to give a better result. In this tutorial you can able to post updates, share pictures, share youtube videos & finally user can able to share / upload pictures via comment.

Image Upload in Comment Box using jQuery and PHP


Database Design

We need to create two tables to implement image upload in comment box using PHP & jQuery

  1. Posts – used to store post description, image, video & post date
  2. Comments – used to store comments, commented date & comment picture
Database Structure
Database Structure

This script contains 4 folders

  • assets
    • Stylesheets
    • Javascripts
    • Images
    • Smileys – contains smiley icons
  • Includes
    • config.php
    • security.php
    • SimpleImage.php – used to upload images
    • Smileys – Used to parse smileys
  • Uploads – all pictures are uploaded to this folder

All you have to do is simply download the script and upload the sql file to your system. And some minor changes needs to be done in config.php


define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'databasename');
define('ImageUploadPath', 'uploads/');
$post_limit = 10;
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
mysql_query ("set character_set_results='utf8'");
$base_url='http://localhost/fb2/'; // with trailing slash
$base_folder = "fb2/"; //leave empty if you using root folder
$smiley_folder = $base_url.'assets/smileys/';

How to Upload images to server in comment form without page refresh?

XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.

It uses the same format a form would use if the encoding type were set to “multipart/form-data“.


Below code will automatically sends the image information from the form via post request without any additional plugins 🙂

var form_data = $("#"+form_id); //form ID
var str = new FormData(form_data[0]);

url: 'post_comment.php',
data: str,
processData: false,
contentType: false,
type: 'POST',
success: function(data){

Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string. See the docs for more info.

Setting the contentType to false is imperative, since otherwise jQuery will set it incorrectly.

for more information about form data

Take a quick look at the live demo, make sure you are using latest browser for better result. View Live Demo



I hope you like this article very much & Please dont forget the share and subscribe my blog to get the latest updates delivered in your email.


  • Facebook
  • Twitter
  • Google+
  • Linkedin