Upload Image Files without Page Refresh using Ajax and Jquery
The languages used for this tutorial are PHP, Ajax and Jquery. The program is written a way that any one can easily understand and customize.
Ajax and Jqery have made life easier for us all. We no longer need to refresh our website pages while uploading files to our servers and this is cool guys.
PHP Code
<?php
$upload_location = "upload_folder/";
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['vasPhoto_uploads']['name'];
$size = $_FILES['vasPhoto_uploads']['size'];
$allowedExtensions = array("jpg","jpeg","gif","png");
foreach ($_FILES as $file) {
if ($file['tmp_name'] > '' && strlen($name)) {
if (!in_array(end(explode(".", strtolower($file['name']))), $allowedExtensions)) {
echo '<div class="notice" style="width:500px;">Sorry, you attempted to upload an invalid file format. <br>Only jpg, jpeg, gif and png image files are allowed. Thanks.</div><br clear="all" />';
}
else {
if($size<(1024*1024))
{
$actual_image_name = "default".'.gif'; // This could be a random name such as rand(125678,098754).'.gif'; but i have used a default name just for demo purpose
$dirnameas = $upload_location.$actual_image_name; //Get and delete old image file before uploading a new one if necessary by you otherwise, remove this
@chmod($dirnameas,0777);
@unlink($dirnameas);
if(move_uploaded_file($_FILES['vasPhoto_uploads']['tmp_name'], $upload_location.$actual_image_name)) {
//Run your SQL Query here to insert the new image file named $actual_image_name if you deem it necessary
echo '<span class="uploadeFileWrapper"><img src="'.$upload_location.$actual_image_name.'" width="150" height="100"></span><br clear="all" /><br clear="all" />';
}
else {
echo "<div class='notice' style='width:500px;'>Sorry, Your Image File could not be uploaded at the moment. <br>Please try again or contact the site admin if this problem persist. Thanks.</div><br clear='all' />";
}
}
else {
echo "<div class='notice' style='width:400px;'>File exceeded 1MB max allowed file size. <br>Please upload a file at 1MB in size to proceed. Thanks.</div><br clear='all' />";
}
}
}
else {
echo "<div class='notice' style='width:400px;'>You have just canceled your file upload process. Thanks.</div><br clear='all' />";
}
}
}
?>
Ajax and Jquery
<script type="text/javascript" src="file_uploads.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#vasPhoto_uploads').live('change', function() {
$("#vasPLUS_Programming_Blog_Form").vPB({
beforeSubmit: function() {
$("#vasPhoto_uploads_Status").show();
$("#vasPhoto_uploads_Status").html('');
$("#vasPhoto_uploads_Status").html('<div style="" align="center"><font style="font-family: Verdana, Geneva, sans-serif; font-size:12px; color:black;">Upload</font> <img src="loading.gif" alt="Upload...." align="absmiddle" title="Upload...."/></div><br clear="all">');
},
url: 'vasPLUSfileUploads.php',
success: function(response) {
$("#vasPhoto_uploads_Status").html($(response).fadeIn(2000));
}
}).submit();
});
});
</script>
HTML Code
<center>
<div align="left" style="width:600px; border:8px solid #F6F6F6;padding:10px;">
<br clear="all" />
<div id="vasPhoto_uploads_Status" align="center" style="font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black; line-height:25px;"></div>
<center>
<div style="width:350px" align="center">
<form id="vasPLUS_Programming_Blog_Form" method="post" enctype="multipart/form-data" action="javascript:void(0);" autocomplete="off">
<div style="padding:10px; padding-top:18px;float:left;font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black; width:100px;" align="left">Browse Photo:</div>
<div style="padding:10px;float:left; font-family: helvetica, arial, 'lucida grande', sans-serif; font-size:12px; color:black; width:200px;" align="left">
<div class="vasplusfile_adds"><input type="file" name="vasPhoto_uploads" id="vasPhoto_uploads" style="opacity:0;-moz-opacity:0;filter:alpha(opacity:0);z-index:9999;width:90px;padding:5px;cursor:default;" /></div>
</div><br clear="all">
</form>
</div>
</center>
<br clear="all" />
</div>
</center>
That's it guys...