Jump to content

Issue in javscript code

Recommended Posts

i have to add this script to show progressbar when the file is uploaded 

the issue is that the progressbar is to 100% and the file is still uploaded

how can i resolve this please


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   function uploadFile() {
    var fileInput = document.getElementById('file1');
    if (fileInput.files.length === 0) {
        console.error('No file selected');
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php'); // Change 'upload.php' to your server endpoint
    xhr.upload.onprogress = function(e) {
        var percentComplete = (e.loaded / e.total) * 100;
        document.getElementById('progress').style.width = percentComplete + '%';
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('File uploaded successfully');
            // Hide upload form and progress bar, show template
        } else {
            console.error('File upload failed');


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...