Ajax Image Upload without Refreshing Page using Jquery

Ajax Image Upload without Refreshing Page using Jquery

In this Post We Will Explain About is Ajax Image Upload without Refreshing Page using Jquery With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to ajax image upload without refreshing page using jquery in phpExample

In this post we will show you Best way to implement ajax image upload without refreshing page using jquery, hear for upload and watermark image files without refreshing page using ajax and jquerywith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Are We looking for jquery ajax file/image upload as well as image_preview without any refreshing HTML page using Jquery. We had implemented this simple jquery ajax form submitting button using jquery.HTML form jquery Plugin as well as used DSP patels image cropping simple PHP code for uploading images. as Just five simple lines of JavaScript code,here source code Using this We can upload files, and image as well as videos.

Also Read :  jQuery Mobile Based Slide Swipeable Side Menu

$(“#photoimg”).live(‘change’,function(){})- photo pictures is the uniqId name of simple HTML INPUT FILE simple tag and $(‘#imageform’).ajaxForm() – imageform is the uniqId name of FORM. here learn to While changing HTML INPUT it calls FORM simple submit without refreshing any page using ajaxForm() method.

<script type="text/javascript" src="jquery.min.js"></script>
<!-- Include External scripts-->
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() 
{ 
$('#photoimg').live('change', function() 
{ 
$("#image_preview").html('');
$("#image_preview").html('<img src="loader.gif" alt="Images Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#image_preview'
}).submit();
});
}); 
</script>

index.php

Contains here simple PHP source code and HTML source code. Here some PHP $user_session_id=1 means user simple uniq id session value.

<?php
include('db.php');
session_start();
$user_session_id='1'; // User login session value
?>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>

<div id='image_preview'>
</div>

Users

Also Read :  PHP Upload and Crop Image using jQuery Ajax

Contains user details liveadmin, mypass, email, profile_image and profile_image_small etc.

CREATE TABLE `clients` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`liveadmin` varchar(255) UNIQUE KEY,
`mypass` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)

ajaximage.php

Contains PHP source code. This script helps We to upload more images into uploads folder. Image file simple name rename into and timestamp+user_session_id.extention

<?php
include('db.php');
session_start();
$user_session_id='1'; // live User session id
$img_path = "uploads/";

$img_valid_format = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$img_name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($img_name))
{
list($txt, $ext) = explode(".", $img_name);
if(in_array($ext,$img_valid_format))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$my_img_name = time().$user_session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $img_path.$my_img_name))
{
mysqli_query($db,"UPDATE clients SET profile_image='$my_img_name' WHERE uid='$user_session_id'");
echo "<img src='uploads/".$my_img_name."' class='image_preview'>";
}
else
echo "live24u image upload failed";
}
else
echo "live24u Image file required size max 1 MB"; 
}
else
echo "live24u Invalid file some format required.."; 
}
else
echo "Please select live24u image required..!";
exit;
}
?>

db.php

Also Read :  jQuery An Animated Scroll To Top Button

Database config configuration file, as well as modify your admin, mypass, database and base url values.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'liveadmin');
define('DB_PASSWORD', 'mypass');
define('DB_DATABASE', 'live24u');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Example

I hope you have Got What is upload image files without refreshing page using ajax and jquery And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

Laravel Validation Unique Soft Delete Example
Today, We want to share with you Laravel Validation Unique Soft Delete Example.In this post we will show you laravel