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.
- 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
We need to create two tables to implement image upload in comment box using PHP & jQuery
- Posts – used to store post description, image, video & post date
- Comments – used to store comments, commented date & comment picture
This script contains 4 folders
- Smileys – contains smiley icons
- 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
$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 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 ““.
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);
Setting to false lets you prevent jQuery from automatically transforming the data into a query string. See the docs for more info.
Setting the to false is imperative, since otherwise jQuery will set it incorrectly.
for more information about form data
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.