Breaking News: Grepper is joining You.com. Read the official announcement!

File upload progress bar with percentage using javascript

xcv answered on August 6, 2022 Popularity 9/10 Helpfulness 2/10

answer File upload progress bar with percentage using javascript

related File upload progress bar with percentage using javascript

File upload progress bar with percentage using javascript

Comment

// SWFUpload
$elem.bind('uploadProgress', function(event, file, bytesLoaded) { fnProgress(file, bytesLoaded); })

// Uploadify
$elem.uploadify({ onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { fnProgress(file, bytesUploaded); });

// Uploadfive
$elem.uploadifive({ onProgress: function(file, e) { fn.onProgress(file, e.loaded); });

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: file-upload javascript percentage progress-bar using

Link to this answer
Share Copy Link

Contributed on Aug 06 2022

xcv

0 Answers Avg Quality 2/10

Closely Related Answers

File upload progress bar with percentage using javascript

Comment

var browse = document.getElementsByClassName('chooseFiles')[0];
var selectDialog = document.createElement("INPUT");
selectDialog.setAttribute("type", "file");
selectDialog.setAttribute("multiple", "true");
selectDialog.style.display = "none";
var progressUpload = document.getElementsByClassName("progressUpload")[0];
var progress;
addProgressBar();
browse.addEventListener("click", function(){    
    selectDialog.click();
      
});
  
selectDialog.addEventListener("change", function(){
      
    sendFiles(selectDialog.files);
  
});
  
function sendFiles(files){
      
    resetProgressBar();
    var req = new XMLHttpRequest();       
    req.upload.addEventListener("progress", updateProgress);
    req.open("POST", "/uploadFile");
    var form = new FormData();
    for(var file = 0; file < files.length; file++){         
          
        form.append("file" + file, files[file], files[file].name);
          
    } 
    req.send(form);  
}
function updateProgress(e){   
      
    progress.style.width = (((e.loaded/e.total)*100))+ "%";
  
}
function resetProgressBar(){
    progress.style.width = "0%";
}
function addProgressBar(){
    var progressBar = document.createElement("div");
    progressBar.className = "progressBar";
    progressUpload.appendChild(progressBar);
    var innerDIV = document.createElement("div");
    innerDIV.className = "progress";
    progressBar.appendChild(innerDIV);
    progress = document.getElementsByClassName("progress")[0];
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.geeksforgeeks.org

Tags: file-upload file

Link to this answer
Share Copy Link

Contributed on Aug 06 2022

xcv

0 Answers Avg Quality 2/10

File upload progress bar with percentage using javascript

Contents

More Related Answers

File upload progress bar with percentage using javascript

Closely Related Answers

File upload progress bar with percentage using javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.