Home / Web Development / Ajax / Facebook Style Background Image Upload and Position Adjustment

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.

demo

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 database store like this.

Database connection in php code

db.php

HTML Code

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

Styling an input type=”file” browse button

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

CSS

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

PHP Code

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

userUpdates.php

image_upload_ajax.php

image_saveBG_ajax.php

index.php

download

Happy Coding

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

Leave a Reply

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

Social Media Auto Publish Powered By : XYZScripts.com