I have successfully implemented a JavaScript function that displays picture previews and uploads them automatically on the onchange event.
Now, I am looking to add a progress bar to show the upload status. However, all the solutions I found online are related to working with submit buttons. Can someone please assist me in modifying the code? Here is the link to the question
Thank you for your help!
<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);
}
});
//implementation of progress bar goes here...
}