Hey Guyz in the tutorial i am going to teach you how to create a file upload system with progress bar with raw ajax. This is very useful for the hosting website because it give a great feedback to the user how much their file has been uploaded. This type to project can be created easily with a code library like jQuery but its greate to create it via raw ajax it give a greate understanding that what is going on
live Demo Download Watch Video
html
html markup is super easy in this we have a form a progressbar and a empty status div
<form action="upload_back.php" method="post" enctype="multipart/form-data" id="form"> <input type="file" name="file1" id="file1"> <input type="submit" name="submit" id="submit" value="upload"> </form> <br> <div style="width:400px;"> <div id="progressbar"> <div id="progress" style="width:0px;"></div> </div> </div> <div id="status"></div>
css
in css we are designing the progress bar fro more details view my previous post on Css3 Progress Bar
<style type="text/css">
#progressbar{
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2);
}
#progress{
height: 20px;
background: cornflowerblue;
display: block;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
-moz-transition: width 0.8s ease;
transition: width 0.8s ease;
}
</style>
JavaScript
in javascript we are sending the uploded data to the upload_back.php page and by diving the kb send and total kb we get the percentage of how much the file is uploaded
<script type="text/javascript">
var ajax = new XMLHttpRequest();
function $(id){
return document.getElementById(id);
}
function upload(e){
e.preventDefault();
var file = $("file1").files[0];
var formdata = new FormData();
formdata.append('file1', file);
ajax.upload.addEventListener('progress', progressHandler, false);
ajax.addEventListener('load', completeHandler, false);
ajax.addEventListener('abort', abortHandler, false);
ajax.addEventListener('error', errorHandler, false);
ajax.open('POST', 'upload_back.php');
ajax.send(formdata);
}
function progressHandler(e){
var percent = (e.loaded / e.total) * 100;
percent = Math.round(percent);
$('progress').style.width = Math.round(percent)+'%';
$('status').innerHTML = percent + '% uploaded plzz wait.....';
}
function completeHandler(){
$('status').innerHTML = ajax.responseText;
$('progress').style.width = '0%';
}
function abortHandler(){
alert('file upload aborted');
}
function errorHandler(){
alert('file upload has an error');
}
//when form is submited
$('form').addEventListener('submit', upload, false);
</script>
upload_back.php
in php file first we are getting the extension of the image and if iuts valid then we upload the file and show the link
<?php
function getext($img){
$name = strtolower($img);
$data = explode(".", $name);
$ext = count($data) -1;
return $data[$ext];
}
if(isset($_FILES)){
$allowed = array('jpg','png','gif');
$ext = getext($_FILES['file1']['name']);
$size = $_FILES['file1']['size'];
if(in_array($ext, $allowed)){
if($size < 2097152){
$name = $_FILES['file1']['name'];
if(move_uploaded_file($_FILES['file1']['tmp_name'], './upload/'.$name)){
echo '<a href="./upload/'.$name.'">'.$name.'</a>';
}else{
echo "file upload has an error";
}
}else{
echo "File size more than <strong>2MB<strong>";
}
}else{
echo "file type not allowed";
}
}else{
echo "not";
}
?>
