如何在 asp.net mvc 中使用 jquery 表单插件上传时显示 gif 图像

Question

我使用 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 图像直到我获得成功 function 的结果。 我怎样才能做到这一点。

谢谢，

迈克尔德

Answer 1

您可以在页面上有一个绝对定位的容器，并在需要时显示/隐藏它。

工作演示。

在这里，我使用了加载文本，您可以将其替换为适当的图像，根据您的要求，您也可以修改 styles。

标记

<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

您可以在 DOM 中插入一个img元素（我假设在beforeSubmit函数中这将是 go ）：

// 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 到 position 它绝对或任何你想做的事情。

然后，在error或success时，您可以删除图像：

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

您可以通过只构建一次元素，然后简单地从 DOM 中添加/删除来提高效率，但这是一个基本的开始。

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