PHP Image Upload Using jQuery and MySQL

This is any other image upload educational using personal home page, jQuery, and MySQL. I’ve already shared tutorial photo upload, Crop and Resize the use of the personal home page, jQuery, and Ajax.

This educational is importing photo to folder and keep photograph name into database desk.i’m no longer cropping or resizing the image, it’s a simple personal home page photo and tutorialyou can also use the modal container for photo add with the assist of photograph Crop functionality In version box using personal home page 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 the image.

  • jQuery Library : Base library to support another jquery plugin
  • Boostrap 3 : Used to create awesome HTML layout
  • Index.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 the database connection with MySQL.
  • upload.php : This file contains PHP code to upload the image into the folder and save image name into the database table.

Simple PHP Image Upload Using AJAX and MySQL

I will create thed:/image_upload_code folder and created the index.php file into this folder.We will create testdatabase and users_image table, We will create table using 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 willusers_image contain user details user, pass, email, and profile_photo.

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

 



 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 theindex.php file.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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 HTML form into index.php file.

<form id="image_upload_form" method="post" enctype="multipart/form-data" action='upload.php' autocomplete="off">
<div class="alert alert-danger hide"></div>
<div class="alert alert-success hide"></div>
<div class="col-md-6">
<div class="form-group">
<label>Upload Image</label>
<div class="input-group">
<input type="text" class="form-control" id="input_image_text" readonly>
<span class="input-group-btn">
<span class="btn btn-success btn-file">
Browse… <input type="file" id="photoimg" name="photoimg"/>
</span>
<button type="submit" class="btn btn-warning">
<i class="glyphicon glyphicon-upload"></i> upload
</button>
</span>
</div>
</div>
</div>
</form>

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.

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);
},
});
});
});


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.


<?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;
}
?>
Please follow and like us:



Leave a Comment

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