Как показать изображение GIF при загрузке с помощью плагина формы jquery в asp.net mvc

Question

У меня есть загрузка файла с использованием плагина jquery form

$(function() {

        $("#Form").ajaxForm({
            iframe: true,
            dataType: "json",
            url: "Upload/Index",
            success: function(result) {
                $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>');

            },
            beforeSubmit: function() {

            },
            error: function(response) {
                alert('error');
            }
        });
    });

и моя форма как

<form id="Form" method="post" enctype="multipart/form-data">
<br />
    <input type="file" name="addedFile" id="addedFile"  />
    <br />
<input type="submit" id="submit" value="submit" runat="server" />
</form>

Теперь я хочу показать загрузку GIF-изображения от нажатия кнопки «Отправить», до тех пор, пока я не получу результат для функции успеха. как я могу это сделать.

спасибо,

MichaelD

Answer 1

Вы можете иметь абсолютно позиционированный контейнер на странице и показывать / скрывать его при необходимости.

Wroking demo .

Здесь я использую загрузочный текст, вы можете заменить его соответствующим изображением, согласно вашему требованию вы также можете изменить стили.

Разметка

<div class="loading">
    <br /><br />
    <div>Loading...</div>
</div>

Css

.loading{
    width:200px;
    height:100px;
    background:#ccc;
    font-weight:bold;

}
.loading div{
    margin: auto 0px;
    text-align:center;
    vertical-align:middle;
}

JS

function showLoading(){
  var $loading = $(".loading");
  var windowH = $(window).height();
  var windowW = $(window).width();

  $loading.css({
    position:"fixed",
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()),
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop())
  }).show();
}

function hideLoading(){
   $(".loading").hide();
}


$(function() {

        showLoading();

        $("#Form").ajaxForm({
            iframe: true,
            dataType: "json",
            url: "Upload/Index",
            success: function(result) {
                hideLoading();
                $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>');

            },
            beforeSubmit: function() {

            },
            error: function(response) {
                hideLoading();
                alert('error');
            }
        });
    });

Answer 2

Вы можете просто вставить элемент img в DOM (я предполагаю, что это будет сделано в функции beforeSubmit):

// doesn't have to be added to the body;
// wherever you want it is cool
$('<img id="loadingGif" src="path/load.gif" />').appendTo('body');

Тогда вы можете просто использовать CSS, чтобы позиционировать его абсолютно или как угодноиначе вы хотели бы сделать.

Затем, на error или success, вы можете удалить изображение:

$('#loadingGif').remove();

Вы можете сделать его немного более эффективным, толькосоздать элемент один раз, а затем просто добавить / удалить его из DOM, но это базовое начало.

Answer 3

вы можете использовать плагин blockUI в jQuery. ссылка .

$(function() {

        $("#Form").ajaxForm({
            iframe: true,
            dataType: "json",
            url: "Upload/Index",
            success: function(result) {
                $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>');
                    $.unblockUI();
            },
            beforeSubmit: function() {
                $.blockUI({ 
                   message: $('#displayBox'), 
                   css: { 
                       top:  ($(window).height() - 400) /2 + 'px', 
                       left: ($(window).width() - 400) /2 + 'px', 
                       width: '400px' 
                }
            },
            error: function(response) {
                alert('error');
            }
        });
    });