PHP Image Upload Using jQuery and MySQL

This is another image upload tutorial using php, jQuery and MySQL. I have already shared tutorial Image Upload,Crop and Resize Using PHP, jQuery and Ajax.This tutorial is uploading image to folder and store image name into database table.I am not cropping or resizing image, its a simple php image upload tutorial, You can also use modal box for image upload with help of Image Crop Functionality In Model Box Using PHP tutorial.

I am using jQuery to submit image and process server side data so that this tutorial help to ajax based image upload using php and jQuery. There are a lot of jQuery plugin available to crop and upload image.

  • jQuery Library : Base library to support other jquery plugin
  • Boostrap 3 : Used to create awesome HTML layout
  • Index.php : This is the main file of this project that will contains HTML code with file upload FORM and jquery code to submit form.
  • connection.php : Use to create database connection with mysql.
  • upload.php : This file contains php code to upload image into folder and save image name into database table.

Simple PHP Image Upload Using AJAX and MySQL

I will create d:/image_upload_code folder and created index.php file into this folder.We will create test database and users_image table, We will create table using below SQL,

The table users_image will contain user details user, pass, email and profile_photo.

Step 1: We will create connection.php file and added below code into this file to create database connection with MySQL.

You can change dbname, servername, username and password variable value as per your database credentials.

Step 2: We will add bootstrap and jQuery library files into head section of index.php file.

Step 3: We will create HTML form into index.php file.

We have added upload.php file into action of form element.We will add jQuery code to submit form ajax manner using jQuery.

Step 4: We will add jQuery code to submit form into footer of index.php.

I have added code to set filename into input text.I have also added submit form jquery code, to submit form data into server side when the user will click submit button.

Step 5: We will created upload.php file and added below code.

You can download source code and see Demo from below link.