Uploading video withaprogress bar
form {
margin:5%auto;
border-radius: .3rem;
padding:1.3rem;
border:#2274ac401pxsolid;
width:30%;
text-align:center;
}
input {
width:90%;
border:0;
padding:20px;
border-radius: 6px;
margin-bottom:10px;
border:1pxsolid#839af5;
}
.btn {
width: 100%;
padding:.5rem;
border:0;
background:#fe6f27;
font-size: 1.2em;
color:#fff;
text-shadow:1px1px0pxrgba[0,0,0,.4];
box-shadow:0px3px0px#fe6f27;
margin-top:1.2rem;
}
.btn:hover {
background: #00398c;
color:#b5b5b5;
box-shadow:none;
}
.form-control {
display:block;
width: 100%;
height:calc[1.5em+.75rem+2px];
padding:.375rem.75rem;
font-size: 1rem;
font-weight:400;
line-height:1.5;
color:#d6d8db;
background-color: #3c4760;
background-clip:padding-box;
border:1pxsolid#72a7db;
border-radius:.25rem;
transition: border-color.15sease-in-out,box-shadow.15sease-in-out;
}
.progress {
background-color:#3fee8c;
position: relative;
margin:20px;
height:1.2rem;
}
.progress-bar {
background-color:#7eeed8;
width: 100%;
height:1.2rem;
}
progress::-webkit-progress-value {
background:#3fee8c;
}
progress::-webkit-progress-bar {
background: #1e1e3c;
}
progress::-moz-progress-bar {
background:#3fee8c;
}
function_[abc]{
return document.getElementById[abc];
}
functionuploadFileHandler[]{
document.getElementById['progressDiv'].style.display='block';
varfile=_["uploadingfile"].files[0];
varformdata=new FormData[];
formdata.append["uploadingfile",file];
varajax=new XMLHttpRequest[];
ajax.upload.addEventListener["progress",progressHandler,false];
ajax.addEventListener["load", completeHandler,false];
ajax.addEventListener["error",errorHandler,false];
ajax.addEventListener["abort", abortHandler,false];
ajax.open["POST","upload.php"];
ajax.send[formdata];
}
function progressHandler[event]{
varloaded=newNumber[[event.loaded/1048576]];//Make loaded a "number" and divide bytes to get Megabytes
vartotal=newNumber[[event.total/1048576]];//Make total file size a "number" and divide bytes to get Megabytes
_["uploaded_progress"].innerHTML ="Uploaded "+loaded.toPrecision[5]+" Megabytes of "+total.toPrecision[5];//String output
var percent=[event.loaded/event.total]*100;//Get percentage of upload progress
_["progressBar"].value =Math.round[percent];//Round value to solid
_["status"].innerHTML=Math.round[percent]+ "% uploaded";//String output
}
functioncompleteHandler[event]{
_["status"].innerHTML= event.target.responseText;//Build and show response text
_["progressBar"].value=0;//Set progress bar to 0
document.getElementById['progressDiv'].style.display ='none';//Hide progress bar
}
functionerrorHandler[event]{
_["status"].innerHTML="Upload Failed";//Switch status to upload failed
}
functionabortHandler[event]{
_["status"].innerHTML="Upload Aborted";//Switch status to aborted
}