My readers continuously asked me to work on Facebook Style uploading pictures in comment box. So thought to share this wonderful tutorial here using PHP, MYSQL & jQuery.

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.

Facebook Style Uploading Picture in Comment using PHP, MYSQL & jQuery

 

Features

Database Design

We need to create two tables

  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 I’m uploading 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 & Download

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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2015/03/facebook_comment.jpghttp://w3lessons.info/wp-content/uploads/2015/03/facebook_comment-150x150.jpgKarthikeyan KfacebookFreebiesjqueryMysqlPHPfacebook,facebook wall script,Jquery
My readers continuously asked me to work on Facebook Style uploading pictures in comment box. So thought to share this wonderful tutorial here using PHP, MYSQL & jQuery.I felt that I haven't included this feature in my wallscript & I thought this is the right time to share this cool feature...