Monthly Archives: May 2016

Ajax Upload and Resize an Image with PHP

Hi Guys,
Today I am presenting the most important social networking feature called ajax upload and resize an image without refreshing the page using PHP and jquery.


This article contains three folders called js,includes and uploads with PHP files.

  • includes
    — getExtension.php
    — compressImage.php
  • js
    — jquery.min.js
    — jquery.form.js
  • uploads

We can upload the image through PHP page. And resize the uploaded image using Ajax in php page.

Javascript Code


Contains simple PHP and HTML code. Here $session_id=1 means user id session value.


Upload image:




Contains PHP code. This script helps you to upload images into uploads folder. Image file name rename into timestamp+session_id.extention


//Original Image
if(move_uploaded_file($uploadedfile, $path.$actual_image_name))
//Insert upload image files names into user_uploads table
mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id';");
echo "";
echo "failed";
echo "Image file size max 1 MB"; 
echo "Invalid file format.."; 
echo "Please select image..!";


Re-sizing image into different pixel dimensions.


This extracts file extension.

function getExtension($str)
$i = strrpos($str,".");
if (!$i)
return "";
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;


If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Facebook Style Background Image Upload and Position Adjustment

Hi all,
I share somany article related to web development. Many people use my article for their professional growth. I got many tutorial requests from my readers related to web development using php, wordpress, mysql, ajax, jquery, javascript etc. From their request, one of my readers asked to me “ how to design facebook style background image upload and position adjustment using web development technology.” After along study, I using Ajax and jQuerymethod for developing this application. I have been published many tutorials related ajax image upload. This one is something different and very interesting.


Table of Content

  • MySQL table
  • HTML or PHP
  • JavaScript
  • Ajax
  • CSS

MySQL table

The MySQL table used for storing user details to database. Here I use user table for this operation. It contains all the registered user details.

		user_id INT auto_increment primary key, 
		username VARCHAR(30), 
		email VARCHAR(100), 
		name VARCHAR(100), 
		passcode VARCHAR(100), 
		profile_background VARCHAR(300),
		profile_background_position VARCHAR(10)

User database store like this.

	INSERT INTO users('username','email','name','passcode','profile_background','profile_background_position')
	VALUES('pritty','','Pritty Times','e10adc3949ba59abbe56e057f20f883e','14643223151.jpg',' -413px');

Database connection in php code



Pritty Times

JavaScript Code

Contains JavaScript code and drag option works with Jquery UI plugin. $(‘body’).on(‘change’,’#bgphotoimg’, function()- bgphotoimg is the ID name of INPUT FILE tag and $(‘#bgimageform’).ajaxForm() – imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method.

CSS Code

body{font-family: Arial, Helvetica, sans-serif;background-color: #e9eaed;color: #333333;}
#container{margin:0 auto;width:900px}
#timelineBackground {
height: 315px;
position: relative;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
margin-top: -20px;
overflow: hidden;
#timelineProfilePic {
width: 170px;
height: 170px;
border: 1px solid #666666;
background-color: #ffffff;
position: absolute;
margin-top: -145px;
margin-left: 20px;
z-index: 1000;
overflow: hidden;
#timelineTitle {
color: #ffffff;
font-size: 24px;
margin-top: -45px;
position: absolute;
margin-left: 206px;
font-weight: bold;
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0,0,0,.8);
z-index: 999;
text-transform: capitalize;
#timelineShade {
min-height: 95px;
position: absolute;
margin-top: -95px;
width: 100%;
.timelineUploadBG {
position: absolute;
margin-top: 50px;
margin-left: 813px;
height: 32px;
width: 32px;
#timelineNav {
border: 1px solid #d6d7da;
background-color: #ffffff;
min-height: 43px;
margin-bottom: 10px;
position: relative;

Styling an input type="file" browse button

Default input type file works with browse button, replaced choose/browse button with camera icon.


Here actual input type="file" in hidden more, applied background image for DIV.

.uploadFile {
background: url('images_bg/whitecam.png') no-repeat;
height: 32px;
width: 32px;
overflow: hidden;
cursor: pointer;
.uploadFile input {
filter: alpha(opacity=0);
opacity: 0;
margin-left: -110px;
.custom-file-input {
height: 25px;
cursor: pointer;

PHP Code

Simple PHP class contains three functions called userDetails, userBackgroundUpdate and userBackgourndPositionUpdate.


db = $db;
public function userDetails($user_id)
$query=mysqli_query($this->db,"SELECT username,email,name,profile_background,profile_background_position  FROM users WHERE user_id='$user_id' ") or die(mysqli_error($this->db));
return $data;
public function userBackgroundUpdate($user_id,$actual_image_name)
$query=mysqli_query($this->db,"UPDATE users SET profile_background='$actual_image_name' WHERE user_id='$user_id'") or die(mysqli_error($this->db));
return $query;
public function userBackgroundPositionUpdate($user_id,$position)
$query=mysqli_query($this->db,"UPDATE users SET profile_background_position='$position' WHERE user_id='$user_id'")or die(mysqli_error($this->db));
return $query;


Save Cover
'; if(move_uploaded_file($tmp, $path.$actual_image_name)) { $data=$userUpdates->userBackgroundUpdate($session_uid,$actual_image_name); if($data) echo $bgSave.''; } else echo "Fail upload folder with read access."; } else echo "Image file size max 1 MB"; } else echo "Invalid file format."; } else echo "Please select image..!"; exit; } ?>


echo $position;


Pritty Times