Estoy cargando un archivo en Azure cuando el usuario hace clic en el cuadro de diálogo de confirmación. El contenido puede ser imágenes, videos o Excel y otros tipos de archivos.

Toma tiempo mientras se carga, así que durante este tiempo quiero mostrar una barra de progreso. Después de cargar con éxito, quiero ocultar la barra de progreso. ¿Puedes ayudarme con eso?

 <div class="progress"> <div id="progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <div id="label" class="control-label">0%</div> </div> </div>

 document.getElementById("dialogBtn").onclick = function() { ej.popups.DialogUtility.confirm({ title: ' Confirmation Dialog', content: "Are you sure you want to upload images into Azure and Update DB", okButton: { text: 'OK', click: function() { okClickInsert(); this.hide(); } }, cancelButton: { text: 'Cancel', click: ClickTest }, showCloseIcon: true, closeOnEscape: true, animationSettings: { effect: 'Zoom' } }); }; function okClickInsert() { // Other Code $.ajax({ url: "@Url.Action("UploadFilesinAzure", "UploadFiles")", data: JSON.stringify(UPLOADToAzure), type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", beforeSend: onProgress, complete: onComplete, success: function(data) { location.reload(); }, error: function(data) {} }); } function onProgress(args) { document.querySelector("body").style.visibility = "hidden"; document.querySelector("#progress").style.visibility = "visible"; } function onComplete(args) { document.querySelector("#progress").style.display = "none"; document.querySelector("body").style.visibility = "visible"; };

 [HttpPost] public async Task<bool> UploadFilesinAzure([Frombody]...) { // Other validation code await DoUploadFileOnlyAsync(FILE Details); }