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
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=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.form.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(‘#photoimg’).live(‘change’, function()
{
$(“#preview”).html(”);
$(“#preview”).html(‘<img src=”loader.gif” alt=”Uploading….”/>’);
$(“#imageform”).ajaxForm(
{
target: ‘#preview’
}).submit();
});
});
</script>
index.php
Here are simple PHP and HTML code. Here $session_id=1 means user id session value. It will changeable.
<?php
include(‘db.php’);
session_start();
$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=’preview’>
</div>
Here is a sample database design for users.
Users
This code contains user details username, password, email, profile_image and profile_image_small etc here.
CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)
ajaximage.php
Here PHP code. This codes script helps you to upload images into uploads folder.
<?php
include(‘db.php’);
session_start();
$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’];
if(strlen($name))
{
list($txt, $ext) = explode(“.”, $name);
if(in_array($ext,$valid_formats))
{
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’>”;
}
else
echo “failed”;
}
else
echo “Image file size max 1 MB”;
}
else
echo “Invalid file format..”;
}
else
echo “Please select image..!”;
exit;
}
?>
db.php
Database configuration file you can define here username, database, password and base URL.
<?php
define(‘DB_SERVER’, ‘localhost’);
define(‘DB_USERNAME’, ‘username’);
define(‘DB_PASSWORD’, ‘password’);
define(‘DB_DATABASE’, ‘database’);
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_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.