jQuery Ajax Image Upload without Page Refresh using PHP

Today, We want to share with you jQuery Ajax Image Upload without Page Refresh using PHP.
In this post we will show you Ajax file upload, hear for simple ajax file upload jquery we will give you demo and example for implement.In this post, we will learn about Image Upload without Page Refresh with PHP and jQuery with Demo with an example.

jQuery Ajax Image Upload without Page Refresh using PHP

There are the Following The simple About jQuery Ajax Image Upload without Page Refresh using PHP Full Information With Example and source code for PHP Image Upload without Page Refresh and jQuery Tutorials.

Main HTML Interface for Image Upload

index.php

<div class="upload_container">
<br />

<div style="width:450px" align="center">
<div id='img_preview'></div>
<form id="profile_images_upload_frm" method="post" enctype="multipart/form-data" action='profile_images_upload.php'>
<div class="browse_text">Select You Profile Image File:</div>
<div class="file_input_container">
<div class="pakainfo upload_button"></div>
</div><br>
</form>
</div>

<br />
</div>

clients Table

CREATE TABLE IF NOT EXISTS `clients` (
`clientid` int(11) NOT NULL AUTO_INCREMENT,
`client` varchar(255) DEFAULT NULL,
`pass` varchar(100) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`profile_photo` varchar(200) DEFAULT NULL,
PRIMARY KEY (`clientid`),
UNIQUE KEY `username` (`client`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

profile_images_upload.php

<?php
$path = "medias/";
$file_format_valid_check = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['client_profile']['name'];
$size = $_FILES['client_profile']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$file_format_valid_check)) {
if($size<(1024*1024)) {
$client_profile_name = time().$client_session_id.".".$ext;
$tmp = $_FILES['client_profile']['tmp_name'];
if(move_uploaded_file($tmp, $path.$client_profile_name)){
mysql_query("UPDATE clients SET profile_photo='$client_profile_name' WHERE clientid='$client_session_id'");
echo "<img src="https://www.pakainfo.com/jquery-ajax-image-upload-without-page-refresh-using-php/medias/%22.client_profile_name" class='img_preview'>";
}
else
echo "sorry, client_profile Upload failed";
}
else
echo "client_profile file size maximum 1 MB, please try again.";
}
else
echo "Invalid your uploaded file format";
}
else
echo "Please select your Good Profile image";
exit;
}
?>

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

upload.js

  Bootstrap Toggle switch Update Database field using Ajax

The file main jQuery upload.js Data contains source code to HTML submit form when your pictures file uploaded to fully submit pictures upload futures with profile_images_upload.php. The file also displays pictures upload main wait loader.

$(document).ready(function() {
$('#client_profile').live('change', function() {
$("#img_preview").html('');
$("#img_preview").html('<img src="https://www.pakainfo.com/loader.gif" alt="Yout Profile Image Uploading...." />');
$("#profile_images_upload_frm").ajaxForm({
target: '#img_preview'
}).submit();
});
});

Read :

Angular 6 CRUD Operations Application Tutorials

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Ajax Image Upload without Refreshing Page using Jquery.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

  Simple Ajax Upload image using jQuery PHP

Related FAQ

Here are some more FAQ related to this Article:

  1.   Get Innerheight-Outerheight-Scrollheight Clientheight using JavaScript
  2.   Ajax Image Upload using PHP and jQuery
  3.   jQuery AJAX Multiple Files Upload using PHP
  4.   Laravel 5.7 Toggle switch Update DB field using Ajax
  5.   Laravel If Else and Switch Case
  6.   Laravel 6 Inner Join Query Example - MySQL
  7.   Angularjs Show Hide Password in Password TextBox with CheckBox
  8.   jQuery Ajax File Upload images using PHP MySQLi
  9.   jQuery AJAX file Image upload PHP Example
  10.   Bind Array to Radio Button List using Angular Example

Leave a Reply

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