html5_ Pure JS Implementation upload file Display file size, file information, upload progress _ do not use JS Library

Foreground HTML
<input type= "File" id= "_netlogo" onchange= "fileselected ();" >
<div id= "FileName" >
</div>
<div id= "FileSize" >
</div>
<div id= "FileType" >
</div>
<div id= "Progressnumber" >
</div>
<button type= "button" class= "btn Btn-default" onclick= "UploadFile ()" > Uploads </button>

Front desk JS

<script type= "Text/javascript" >

function fileselected () {
var file = document.getElementById (' _netlogo '). Files[0];
if (file) {
var fileSize = 0;
if (File.size > 1024 * 1024)
FileSize = (Math.Round (file.size */(1024x768)/+). ToString () + ' MB ';
Else
FileSize = (Math.Round (file.size * 100/1024)/+). ToString () + ' KB ';

document.getElementById (' FileName '). InnerHTML = ' Name: ' + file.name;
document.getElementById (' FileSize '). InnerHTML = ' Size: ' + fileSize;
document.getElementById (' FileType '). InnerHTML = ' Type: ' + file.type;
}
}

function UploadFile () {
var fd = new FormData ();
Fd.append ("_netlogo", document.getElementById (' _netlogo '). Files[0]);
var xhr = new XMLHttpRequest ();
Xhr.upload.addEventListener ("Progress", uploadprogress, false);
Xhr.addeventlistener ("Load", Uploadcomplete, false);
Xhr.addeventlistener ("Error", uploadfailed, false);
Xhr.addeventlistener ("Abort", uploadcanceled, false);
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.open ("POST", "/user/wnetedit2_test");
Xhr.send (FD);
}

function Uploadprogress (evt) {
if (evt.lengthcomputable) {
var percentcomplete = Math.Round (evt.loaded * 100/evt.total);
document.getElementById (' Progressnumber '). InnerHTML = percentcomplete.tostring () + '% ';
}
else {
document.getElementById (' Progressnumber '). InnerHTML = ' unable to compute ';
}
}

function Uploadcomplete (evt) {
/* This event is raised if the server send back a response */
alert (Evt.target.responseText);
}

function uploadfailed (evt) {
Alert ("There was a error attempting to upload the file.");
}

function uploadcanceled (evt) {
Alert ("The upload have been canceled by the user or the browser dropped the connection.");
}
</script>

Background test function

public string Wnetedit2_test ()
{
var f = request.files[0];
String path = System.IO.Path.Combine (Server.MapPath ("~/app_data"), System.IO.Path.GetFileName (F.filename));
F.saveas (path);
Return "File (s) uploaded successfully";
}

html5_ Pure JS Implementation upload file Display file size, file information, upload progress _ do not use JS Library