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

Last modified on by Karthikeyan K

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

Features

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

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

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.

Thanks

You May Also Like

23 Responses

  1. Majid Lotfi says:

    Hi,
    Thanks for this tutorial, I run it, it’s working except “write a comment ” does not work, when you just write a comment and hit submit, you will get “Invalid File Format”.

  2. Matt . says:

    What about someone first registering his name or email ?

  3. ammiel says:

    Why I can’t download the script?

  4. Jose Carlo Quilala says:

    After uploading an image, what if the user just leave it and not posting? the image will still be in your system without reference of any post

  5. biaju says:

    Hi Karthikeyan, Gr8 work…. and thank you for sharing.
    In the current version which i have downloaded, Upload picture doesn’t support multiple image upload? Can you fix this ?

  6. Devang says:

    hi ,
    I subscribe but i can not download the code can you please help me ?

  7. artie mututsa says:

    Got some file upload errors, can you answer our questions pls?

  8. iyke says:

    my download refused to start……i dont have the file, pls help

  9. Ahmadkhan Ahmadzai says:

    hello sir please send me the comment box which you use
    my email adress is ah.khan.ahzai@gmail.com
    please send i need it please

  10. raj says:

    not able to download

  11. Ighzer Chrea says:

    why when a post comment without file the submit don’t work ???

  12. El-Mahbub says:

    i was subcribe but cant to download

  13. pankaj kumar says:

    hello sir please send me the comment box which you use
    my email adress is info.pankajku75@gmail.com
    please send i need it please

  14. Yash Gupta says:

    sir can You please create facebook like button or same like YT with dislike button

Leave a Reply

Your email address will not be published. Required fields are marked *