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

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); } });

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related