PHP Image Upload Using JQuery and MySQL
PHP Image Upload Using jQuery and MySQL - Phpflow.com
This is another image upload tutorial using PHP, jQuery and MySQL. I have already shared the tutorial Image Upload,Crop and Resize Using PHP, jQuery and Ajax.This tutorial is uploading images to a folder and stores image names into the database table. I am not cropping or resizing images, it’s a simple PHP image upload tutorial.You can also use the modal box for image upload with help of Image Crop Functionality In Model Box Using PHP tutorial.I am using jQuery to submit an image and process server-side data so this tutorial helps to ajax based image upload using PHP and jQuery.jQuery Library: Base library to support other jquery plugins.Boostrap 3: Used to create the awesome HTML layoutIndex.php: This is the main file of this project that will contain HTML code with file upload FORM and jquery code to submit the form.connection.php: Use to create a database connection with MySQL.upload.php: This file contains PHP code to upload an image into a folder and save the image name into the database table.Simple PHP Image Upload Using AJAX and MySQLI will create d:/image_upload_code folder and create index.php file into this folder. We will create test database and users_image table, We will create a table using the below SQL.CREATE TABLE IF NOT EXISTS `users_image` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user` varchar(255) DEFAULT NULL,
`pass` varchar(100) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`profile_photo` varchar(200) DEFAULT NULL,
PRIMARY KEY (`uid`),
UNIQUE KEY `username` (`user`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
The table users_image will contain user details user, pass, email and profile_photo.Step 1: We will create connection.php file and add the below code into this file to create a database connection with MySQL.<?php
Class dbObj{
    /* Database connection start */
    var $servername = "localhost";
    var $username = "root";
    var $password = "";
    var $dbname = "test1";
    var $conn;
    function getConnstring() {
        $con = mysqli_connect($this->servername, $this->username, $this->password, $this->dbname) or die("Connection failed: " . mysqli_connect_error());

        /* check connection */
        if (mysqli_connect_errno()) {
            printf("Connect failed: %s\n", mysqli_connect_error());
            exit();
        } else {
            $this->conn = $con;
        }
        return $this->conn;
    }
}
?>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 the head section of index.php file.<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>Step 3: We will create an HTML form into index.php file.Added upload.php file into the action of a form element. We will add jQuery code to submit form ajax manner using jQuery.<form id="image_upload_form" action="upload.php" autocomplete="off" enctype="multipart/form-data" method="post">
	<div class="alert alert-danger hide">&nbsp;</div>
	<div class="alert alert-success hide">&nbsp;</div>
	<div class="col-md-6">
	<div class="form-group"><label>Upload Image</label>
	<p>&nbsp;</p>
	<div class="input-group"><input id="input_image_text" class="form-control" readonly="readonly" type="text" /> <span class="input-group-btn"> <span class="btn btn-success btn-file"> Browse… <input id="photoimg" name="photoimg" type="file" /> </span> <button class="btn btn-warning" type="submit"> <i class="glyphicon glyphicon-upload"></i> upload </button> </span></div>
	</div>
	</div>
</form>Step 4: We will add jQuery code to submit the form into the 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 the server side when the user will click submit button.jQuery(document).ready(function(){
    $('#photoimg').on('change', function() {
        var label = $(this).val().replace(/\\/g, '/').replace(/.*\//, ''),
         input = $('#input_image_text').val(label);
         $('.alert').addClass('hide');
         $('.alert').removeClass('show');

    });

    var frm = $('#image_upload_form');

    frm.submit(function (e) {
    	e.preventDefault();
    	var formData = new FormData();
        formData.append('photoimg', $('#photoimg')[0].files[0]);

        
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: formData,
            dataType: "json",
            processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType

            success: function (data) {
                console.log(data['error']);
                if(data.error == 1) {
                	$('.alert-danger').removeClass('hide').addClass('show').html(data['msg']);
                } else {
                	$('.alert-success').removeClass('hide').addClass('show').html('Uploaded');
                console.log(data);
                }
                
            },
            error: function (data) {
                console.log(data);
                $('.alert-danger').removeClass('hide').addClass('show').html(data);
            },
        });
        });  
    });Step 5: We will create an upload.php file and add the below code.<?php
include_once("connection.php");
    
$db = new dbObj();
$connString =  $db->getConnstring();

$path = "images/";
$valid_file_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
    $name = $_FILES['photoimg']['name'];
    $size = $_FILES['photoimg']['size'];
    //print_R($_POST);die;
    if(strlen($name)) {
        list($txt, $ext) = explode(".", $name);
        if(in_array($ext,$valid_file_formats)) {
            if($size<(1024*1024)) {
                $user_id = 1;
                $image_name = time().'_'.$user_id.".".$ext;
                $tmp = $_FILES['photoimg']['tmp_name'];
            if(move_uploaded_file($tmp, $path.$image_name)){
                
                $sql = "UPDATE users_image SET image='".$image_name."' WHERE id=$user_id";
        
                $result = mysqli_query($connString, $sql) or die("error to update image data");

                echo json_encode(array('error'=>0, 'msg' => "Successfully!  Uploaded image.."));
            }
            else
                echo json_encode(array('error'=>1, 'msg' => "Image Upload failed..!"));
            }
            else
                echo json_encode(array('error'=>1, 'msg' => "Image file size maximum 1 MB..!"));
        }
        else
            echo json_encode(array('error'=>1, 'msg' => "Invalid file format..!"));
    }
    else
        echo json_encode(array('error'=>1, 'msg' => "Please select image..!"));
    exit;
}
?>You can download source code and see Demo from below link.