Image upload progress bar without submit- Javascript

Question

I have a javascript function that is displaying picture preview and uploading it automatically on onchange event (this part is working).

I would like to add progress bar. After searching here all I can find are solutions working with submit button. File upload progress bar with jQuery

Can you please help me modify the code

Thanks

<input type="file" id="5_slika_upload" name="5_pocetna_slika_file" accept="image/*" />

function pocetna_slika_upload_select(){
    pocetna_slika_upload_div.style.display="flex";
    var reader = new FileReader();
    reader.onload = function() {
        var output = pocetna_slika_upload_div_img;
        output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
    
    var file_data = $('#5_slika_upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    $.ajax({
            url: "https://markolucic.from.hr/image_upload.php",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                console.log(data);
            }
        });
        
    //add code for progress bar :)
        
}

Musa · Accepted Answer · 2021-07-15 22:37:18Z

1

You can use the xhr parameter of $.ajax to set up an upload progress event handler and use that data to create a progress bar.

$.ajax({
        url: "https://markolucic.from.hr/image_upload.php",
        type: "POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData:false,
        xhr:function(){
            var xhr = new XMLHttpRequest();
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete);
                }
            };                
            return xhr;
        },
        success: function(data){
            console.log(data);
        }
    });

answered Jul 15, 2021 at 22:37

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marko Lučić Over a year ago

how to do this with multiple images?

Musa Over a year ago

You'll have to make one request per image if you want to have a progress bar for each image.

Collectives™ on Stack Overflow

Image upload progress bar without submit- Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related