HTML5 asynchronous upload image display upload file progress bar

emo_album_id:<input type= "text" name= "emo_album_id" id= "emo_album_id" value= ' 1 ' ></p><p>Name:<input type= "text" name= "title" id= "title" ></p> <div class= "Row" > <label for= "File" >Upload Image:</label> <input type= "file" Name= "Filetoupload" id= "filetoupload" multiple= "multiple" onchange= "f Ileselected (); "/> </div>Sentencemovie[photo]<div id= "FileName" > </div> <div id= "FileSize" > </div>        <div id= "FileType" > </div> <div id= "Progressnumber" > </div> <script>functionfileselected () {varFile = document.getElementById (' filetoupload '). files[0]; if(file) {varFileSize = 0; if(File.size > 1024 * 1024) FileSize= (Math.Round (file.size */(1024x768)/+). ToString () + ' MB '; ElsefileSize= (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;                        UploadFile (); }                    }                    functionUploadFile () {varFD =NewFormData (); Fd.append ("Upload_file", document.getElementById (' Filetoupload '). files[0]); Fd.append ("Emo_album_id", document.getElementById (' emo_album_id '). Value); Fd.append ("title", document.getElementById (' title '). Value); varXHR =NewXMLHttpRequest (); Xhr.upload.addEventListener ("Progress", uploadprogress,false); Xhr.addeventlistener ("Load", Uploadcomplete,false); Xhr.addeventlistener ("Error", uploadfailed,false); Xhr.addeventlistener ("Abort", uploadcanceled,false); Xhr.open ("POST", "Http://mysae.com/emotions/1/api/index.php/emo/upload");                    Xhr.send (FD); }                    functionuploadprogress (evt) {if(evt.lengthcomputable) {varPercentComplete = Math.Round (evt.loaded * 100/evt.total); document.getElementById (' Progressnumber '). InnerHTML = percentcomplete.tostring () + '% '; }                        Else{document.getElementById (' Progressnumber '). InnerHTML = ' Unable to compute '; }                    }                    functionUploadcomplete (evt) {/*This event was raised when the server send back a response*/alert (evt.target.responseText); }                    functionuploadfailed (evt) {alert ("There was a error attempting to upload the file."); }                    functionuploadcanceled (evt) {alert ("The upload have been canceled by the user or the browser dropped the connection."); }        </script> </body>
HTML5 asynchronous upload image display upload file progress bar