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.

Please check my latest post on facebook style hash tag system with php & mysql and also Twitter style Mention system with PHP & Mysql

Features of Image Upload in Comment Box

• Upload pictures in Post & Comments
• Share updates
• Share youtube videos
• Delete post
• Facebook timeline design
• Live commenting system
• Smiley support
• Delete comment
• Infinite scroll – Auto load more

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

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

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“.

Syntax

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]);

$.ajax({

url: 'post_comment.php',

data: str,

processData: false,

contentType: false,

type: 'POST',

success: function(data){

alert(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

• https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

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

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.

Thanks