Created
December 23, 2021 15:34
-
-
Save nodir-malikov/5d5fecff9b8d4d7c080d1f17d656d038 to your computer and use it in GitHub Desktop.
File Upload Progress bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>HTML5 File Upload Progress Bar Tutorial</h2> | |
<form id="upload_form" enctype="multipart/form-data" method="post"> | |
<input type="file" name="file1" id="file1" onchange="uploadFile()"><br> | |
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress> | |
<h3 id="status"></h3> | |
<p id="loaded_n_total"></p> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function _(el) { | |
return document.getElementById(el); | |
} | |
function uploadFile() { | |
var file = _("file1").files[0]; | |
// alert(file.name+" | "+file.size+" | "+file.type); | |
var formdata = new FormData(); | |
formdata.append("file1", file); | |
var ajax = 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", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP | |
//use file_upload_parser.php from above url | |
ajax.send(formdata); | |
} | |
function progressHandler(event) { | |
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total; | |
var percent = (event.loaded / event.total) * 100; | |
_("progressBar").value = Math.round(percent); | |
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait"; | |
} | |
function completeHandler(event) { | |
_("status").innerHTML = event.target.responseText; | |
_("progressBar").value = 0; //wil clear progress bar after successful upload | |
} | |
function errorHandler(event) { | |
_("status").innerHTML = "Upload Failed"; | |
} | |
function abortHandler(event) { | |
_("status").innerHTML = "Upload Aborted"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment