STAY HOME! STAY SaVE

Techies Net
  • Home
  • Software
    • Dotiny
  • Web & App Development
    • Website Builder
    • App Development
  • Request Review
  • Advertise
  • Mobile App
  • Contact Us

How to Crop Image in Bootstrap Modal and Upload using Jquery & PHP

8/7/2018

0 Comments

 
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. 
Image cropping - Bootstrap Modal
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.

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.
DEMO - CROP IMAGE
DOWNLOAD CODE

Author : Shoeb Ahmad Fareed

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.

Techies Net - Technology Blog
Share This Post




0 Comments



Leave a Reply.

    Get Updates Via Email

    Enter Email Address

    7:00 AM - 9:00 AM IST

    Blog Sponsors


    Category

    All
    Apps
    Camera
    Cars Bikes
    Cloud
    Computers
    Earn Easy Money
    Education
    Entertainment
    Fun
    Games
    How To
    Innovation
    Mobile
    News Internet
    News Internet47f3cea023
    News Internet769585a1ca
    News Of Internet
    News Of Internet
    SmartBand
    Smartwatch
    Software
    Technology

    Archives

    January 2019
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    December 2017
    August 2017
    July 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    September 2015
    August 2015
    July 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    November 2014
    October 2014
    September 2014
    August 2014
    July 2014
    June 2014
    May 2014
    April 2014
    March 2014
    February 2014
    January 2014
    December 2013
    November 2013
    October 2013
    September 2013
    August 2013
    July 2013
    June 2013
    May 2013
    April 2013
    March 2013
    February 2013
    January 2013
    December 2012
    November 2012
    October 2012
    September 2012
    August 2012
    July 2012
    June 2012
    May 2012
    April 2012
    March 2012
    February 2012
    January 2012
    December 2011
    November 2011
    October 2011
    September 2011
    August 2011
    July 2011
    June 2011
    May 2011
    April 2011
    March 2011
    February 2011

Contact Us

Email: support@techiesnet.com

Stay Connected

Download Our Mobile App 

Techies Net Mobile App
Copyright © 2011-2019 Techies Net | Our Logo | Advertise | Careers | Donate Us | All Right Reserved.
All the trademarks are sole property of their respective owners.

Powered By HostChef.In

  • Home
  • Software
    • Dotiny
  • Web & App Development
    • Website Builder
    • App Development
  • Request Review
  • Advertise
  • Mobile App
  • Contact Us