As a web developer, many times we come across a requirement of uploading profile images using PHP and Jquery, which in my view is an easy task. But think of scenario where requirement is slightly tweaked. i.e. Before uploading image to web server, it has to cropped in specific dimensions like 400x400 or 1200x1200, etc.
Flow should be in this form: User click Upload button -> Select image from computer-> After selecting image should open in Bootstrap Modal -> Crop uploaded Image -> Then upload cropped image to server. Can you develop this flow? Don't worry, continue reading to get the solution.
This is kind of difficult and time consuming as it needs an expertise in DOM event listeners and Jquery. Don't worry you need not learn anything by now. Just check out our demo to understand and flow the steps below to make it work.
This is kind of difficult and time consuming as it needs an expertise in DOM event listeners and Jquery. Don't worry you need not learn anything by now. Just check out our demo to understand and flow the steps below to make it work.
|
|
|
Source code: Explanation
1. db_connect.php : Connecting application to Mysql Database. Change the database credentials and save this file.
db_connect.php
2. Users.sql: Copy the below SQL syntax and insert below table to "techiesnet_demos" database.
Users.sql
3. Index.php: This is main file that you need to run. It consist of bootstrap modal and Crop image jquery library attached to it. Run this file in your local or hosting to test the application.
Index.php
Please checkout the demo and download the source code to test the application.
Author : Shoeb Ahmad Fareed
Designation: Founder & CEO
Bio: A Technology Leninist who believes that success can only be achieved if one has a practical implementation knowledge. He is a Computer Science Engineer, a professional blogger and a debugger.
Bio: A Technology Leninist who believes that success can only be achieved if one has a practical implementation knowledge. He is a Computer Science Engineer, a professional blogger and a debugger.
