Progress bar on file upload and information registration

Asked

Viewed 544 times

5

I’m developing a project, where I upload files, as well as a record of information. Both the file and the information are registered in the same form. So far so good, but usually, when there are larger files, it takes about 20 to 30 seconds to upload. Sometimes it takes longer, and at the moment the project has nothing to indicate the upload progress to the user. Therefore, depending on the user, the same may think that nothing happened, and reload the page. In this way, I wanted to know how to put a progress bar, modal, or anything, that informs the user that the upload is being done. How to do this?

jquery asp.net-mvc asp.net asp.net-mvc-5 asp.net-mvc-4

  • There are already questions on the site that solve this problem. Have you looked for them? found one that would help you or similar?

  • Sorry, but for this category I did not find any that gave me a light. Not even in the English version of the site @Sergio

  • Take a look here. But in fact there is not much with ASP...

  • 1

    Favoritei. I can already say that the solution involves using Backload and an upload package such as jQuery File Upload Plugin. Then I’ll write you an answer.

  • OK @Ciganomorrisonmendez. I’ll be waiting. Thank you!

2 answers

2


I also needed to put some activity indicator in my Asp.net application, I managed using jQuery Blockui.

It blocks the page so the user does not click and displays some image, gif, message so that the same knows that he is working during the Postbacks.

http://malsup.com/jquery/block/#page

Hug.

1

What you need is to add an overlay (gif) inserir a descrição da imagem aqui while your form is being sent, and hide that overlay when page loading is completed.

$(document).ready(function() {
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');
    $("body").prepend("<div id='aguarde' style='display: none;'><img src='/imagens/loading.gif'/></div>");
});

$('#formulario').submit(function() {
    $("#overlay, #aguarde").show();

    return true;
});

Adapted from the answer in English https://stackoverflow.com/a/8140976/1639385

Browser other questions tagged jquery asp.net-mvc asp.net asp.net-mvc-5 asp.net-mvc-4

You are not signed in. Login or sign up in order to post.