javascript - How to show progress bar in percentage? -
how can show progress of upload on screen in percents? show bar starts 0% , output percentage percentcomplete
variable. once upload completed see message completed in progress bar. if can provide examples appreciate that. thank you.
<div>select file upload: <input type="file" id="fileupload" name="fileupload" onchange="fileupload()"/> <span id="showbar"></span> </div>
here jquery function:
function fileupload(){ var reader = new filereader(); var file = fileexist.files[0]; reader.onload = function(e) { var text = reader.result.split(/\r\n|\n/); var myform = new formdata(document.getelementbyid('myform')); $.ajax({ /*start-progress bar code*/ xhr: function(){ var xhr = new window.xmlhttprequest(); xhr.upload.addeventlistener("progress", function(evt){ if(evt.lengthcomputable){ var percentcomplete = evt.loaded / evt.total; percentcomplete = parseint(percentcomplete * 100); console.log(percentcomplete); if(percentcomplete === 100){ console.log("successfully uploaded!"); } } },false); return xhr; }, /*end*/ type: 'post', url: 'fileupload.cfc?method=uploadfile', data: new formdata($('#myform')[0]), cache: false, contenttype: false, enctype: 'multipart/form-data', processdata: false, datatype: 'json' }).done(function(obj){ if(obj.status === 200){ $('#myform')[0].reset(); }else{ alert('error!'); } }).fail(function(jqxhr, textstatus, errorthrown){ alert(errorthrown); }) } reader.readastext(file, 'utf-8'); }
have considered plupload? core example, simple textual percentage: http://www.plupload.com/examples/core
Comments
Post a Comment