KodeBuilder Feeds

A simple working tutorial of progress bar with the help of PHP,HTML and JAVASCRIPT


Like 45 Likes

Published on - 07-Sep-2015 05:00 am

Share On

Get Free Ecommerce Website
Hello friends,this is my first tutorial on web,hope you guyz will like this,i will be waiting for your comments. Today we are going to learn,how a dynamic progress bar works while uploading a file to server.This script will work in all the latest browsers without any hassle.In this tutorial ,i have used Php,Html and javascript to upload the files to server.we need two files one is "index.html" and another one "upload.php" file,we will upload files through html and save the files in server dir via php file.

Index.html


<div>
<form enctype="multipart/form-data" method="upload.php" onsubmit="return false;" >


<input type="file" id="myFile" name="file" />

<input type="submit" onClick="uploadFile(); return false;">
</form>
</div>


<div ><progress value="0" max="100" id="progressbar" style="width:50%"></progress>
</div>

<div id="status"></div>

<!-- Javascript Function To upload the file and send the file to server -->

<script>

function uploadFile() {

var progressbar=document.getElementById("progressbar");
var xhr= new XMLHttpRequest();
var status=document.getElementById("status");
var file=document.getElementById("myFile");


status.innerHTML="";
//Condition to check user has browse the file
if(file.value !="" ) {

var filesize=Math.round(file.files[0].size/1024);
if(filesize < 20000)
{

// FormData API to hold the data and send via xhr request
var dataToHold = new FormData();
var filetoappend = file.files[0];
dataToHold.append("files", filetoappend);

xhr.open("POST","upload.php",true);
// Function to update the progress bar
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = Math.ceil((event.loaded / event.total) * 100);
progressbar.value=percentComplete;

}
}

//Function when file has been uploaded to server
xhr.upload.onload=function(event)
{
status.innerHTML="File Uploaded";
file.value="";
}

xhr.send(dataToHold);
}

else {

alert("Please Choose a file less than 20 Mb");
}
}
else
{
alert("Please Select a file");
}

}
</script>





upload.php



$filename=rand(0,999999)."_".$_FILES["files"]["name"];
//Move the files to "files" Dir
move_uploaded_file($_FILES["files"]["tmp_name"],"files/".$filename);




First of all we have created a html form to upload the user data to server and created a progress bar tag to view the progress of uploading process. Then all the real work has done via javascript by uploadFile() Function.

var progressbar=document.getElementById("progressbar");
var xhr= new XMLHttpRequest();
var status=document.getElementById("status");
var file=document.getElementById("myFile");
Here we have hold the reference of xhr,status and file.

Now we are checking the when user click on submit button,file should be there and it should be less than 20 MB.


if(file.value !="" ) {

var filesize=Math.round(file.files[0].size/1024);
if(filesize < 20000)
{


After it we have open a xhr request and append the data to Formdata,following functions are doing the job to upload the data and update the progress bar.

var dataToHold = new FormData();
var filetoappend = file.files[0];
dataToHold.append("files", filetoappend);

xhr.open("POST","upload.php",true);
// Function to update the progress bar
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = Math.ceil((event.loaded / event.total) * 100);
progressbar.value=percentComplete;

}
}

//Function when file has been uploaded to server
xhr.upload.onload=function(event)
{
status.innerHTML="File Uploaded";
file.value="";
}

xhr.send(dataToHold);


After the end of javascript process, the php file starts saving the file to "files" Dir.

$filename=rand(0,999999)."_".$_FILES["files"]["name"]; //Move the files to "files" Dir move_uploaded_file($_FILES["files"]["tmp_name"],"files/".$filename);

Process is done.Thanks to all and waiting for your valuable comments.
Working Demo
Send Your Comments

Note : KodeBuilder is not a copywriter of this content.This content is posted by users.
Content Owner can ask for removal of the content in 'Contact Form'.


Add Comment
 
Name