Using Jquery File Upload: Ajax Image Upload Without Refreshing

When you try to ajax file upload it’s like an image actually. Then this post is for you for how to jquery image upload without refreshing. This project makes with ajax or jquery file upload for image or any kind of file upload in your project without refreshing.

You can upload file image and videos with using some JavaScript codes. It’s a simple trick for you to create the project. We used jquery.form plugins codes are appearing below for you to creating.

Read Similar Post:
1. Make Facebook Style Notification Popup Using CSS and Jquery Codes

2. Login with Facebook and Twitter Easy Program With Codes

3. Facebook Like Profile Able To Edit With Jquery

4. Replace URL With HTML Link By Jquery Plugins & JavaScript Plugins

5. How To Make Login PHP Form With PHP Login Script And Jquery

jquery image upload, Using Jquery File Upload: Ajax Image Upload Without Refreshing

This projects created by Srinivas Tamada(Computer Engineer) from India.

So, lets for creating jquery image upload system without refreshing hassle.

Ajax/Jquery image upload without refreshing
Javascript Codes:

<script type=”text/javascript” src=”
<script type=”text/javascript” src=”jquery.form.js”></script>
<script type=”text/javascript”>

$(‘#photoimg’).live(‘change’, function() 

$(“#preview”).html(‘<img src=”loader.gif” alt=”Uploading….”/>’);
target: ‘#preview’

Here are simple PHP and HTML code. Here $session_id=1 means user id session value. It will changeable.

$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” />

<div id=’preview’>

Here is a sample database design for users. 
This code contains user details username, password, email, profile_image and profile_image_small etc here.

CREATE TABLE `users` (
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),

Here PHP code. This codes script helps you to upload images into uploads folder.

$session_id=’1′; // User session id
$path = “uploads/”;

$valid_formats = array(“jpg”, “png”, “gif”, “bmp”,”jpeg”);
if(isset($_POST) and $_SERVER[‘REQUEST_METHOD’] == “POST”)
$name = $_FILES[‘photoimg’][‘name’];
$size = $_FILES[‘photoimg’][‘size’];
list($txt, $ext) = explode(“.”, $name);
if($size<(1024*1024)) // Image size max 1 MB
$actual_image_name = time().$session_id.”.”.$ext;
$tmp = $_FILES[‘photoimg’][‘tmp_name’];
if(move_uploaded_file($tmp, $path.$actual_image_name))
mysqli_query($db,”UPDATE users SET profile_image=’$actual_image_name’ WHERE uid=’$session_id'”);
echo “<img src=’uploads/”.$actual_image_name.”‘ class=’preview’>”;
echo “failed”;
echo “Image file size max 1 MB”; 
echo “Invalid file format..”; 
echo “Please select image..!”;

Database configuration file you can define here username, database, password and base URL.

define(‘DB_SERVER’, ‘localhost’);
define(‘DB_USERNAME’, ‘username’);
define(‘DB_PASSWORD’, ‘password’);
define(‘DB_DATABASE’, ‘database’);

Your project is done!
Hopefully, you can able to create the project with ajax is image upload without refreshing. You can able upload any kind of the file here like video, image or others file by input first your username.

If you have any doubt about this project of face any problem then ask me via the comment field. Share it on social media with your own buddies.

Tags Are:
ajax file upload, jquery file upload, jquery ajax file upload, jquery image upload.

Leave a Comment