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图像，直到我获得成功功能的结果。我怎么能这样做。

感谢，

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

你可以在DOM中插入一个img元素（我假设这将放在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

你可以使用jQuery的blockUI插件。 reference

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

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

3 个答案: