如何显示GIF图像，而在asp.net的MVC使用jQuery插件的形式上传(how to show

我使用jQuery插件的形式作为有文件上传

$(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:

您只需插入一个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 2:

你可以在页面，并显示在绝对定位的容器/隐藏它，只要需要。

Wroking 演示。

这里我用一个载入文本可以通过适当的图像更换，按您的要求，你也可以修改样式。

标记

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

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 3:

你可以使用jQuery的blockUI插件。参考。

$(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');
            }
        });
    });

文章来源: how to show gif image while uploading using jquery form plugin in asp.net mvc