Question

当我点击提交按钮时，“输入类型=”提交“id =”提交“value =”保存“”。它开始上传我从硬盘中选择的文件。这一切都无关紧要，因为我用文本“上传”做了一个div 而div的风格是可见性：隐藏; 现在我想要的是当我点击提交按钮（文件开始上传的时间）div变得可见时，我尝试了几件事，包括 “How can I display a status message while a file is uploading?”但没有运气，可能只是我，但我对jQuery相当新，所以我很感激一些帮助。

由于

编辑：我尝试了下面的所有代码，但没有任何效果，我也试过了

$('#editform').submit(function() {
        $('#loadingdiv').show();
        return true;
    });

（editform是我正在处理的表单ID）但没有运气，有谁知道为什么会这样？

我的整个编辑页面

@using (Html.BeginForm("Edit", "Admin",FormMethod.Post, new { enctype = multipart/form-data", id = "editform" })){
@Html.EditorForModel()
<div class="editor-field">
    @if (Model.ImageData == null)
    {
        @:None
    }
    else
    {
        <img width="150" height="150"
             src="@Url.Action("GetImage", "Product", new { Model.ProductID })" alt="bic boii" />
    }
    <div>
        Upload nieuw image: &nbsp; &nbsp; &nbsp;
        <input type="file" name="Image" />
    </div>
</div>

<div>
    Upload nieuw document:
    <input type="file" name="Pdf" />
</div>

<script type="text/javascript">
    $('#editform').submit(function() {
        $('#loadingdiv').show();
        return true;
    });

</script>
<input type="submit" id="submit" value="Opslaan" />
@Html.ActionLink("Ga terug", "Index")
<div id="loadingdiv">
    Bezig met uploaden.
</div>}

嗯，在我的表单上放一个断点后，它只是完全跳过我的脚本，我不确定那是什么

Answer 1

$("#submit").click(function () { $("#yourContainerId").show(); });

这样说：当点击提交按钮时，启动一个功能，你可以选择包含消息的div（我在这里称为yourContainerId的id）并显示它。

如果它不起作用，它应该返回一个错误，可能有助于我们知道发生了什么。如果您在问题上发布客户端代码也可能更容易。也许你的代码有一些错误，阻止执行到达你试图显示你的消息的代码。

Answer 2

您可以使用Ajax上传文件吗？然后你可以在ajax调用之前调用Div的显示，当它完成时，然后隐藏div。

$.ajax({

    type: "POST",
    url: "/SomeController/SomeAction",
    data: $('form').serialize(),
    timeout: 3000,
    async: false,
    beforeSend: function() {
        $("loading").show();

    },

    complete: function() {
        $("loading").hide();

    },        
    cache: false,
    success: function(result) {

         return result;

    },
    error: function(error) {
        $("laoding").hide();
        alert("Some problems have occured. Please try again later: " + error);

    }

});

使用jQuery，jQueryUI或Ajax上传文件时的ASP.NET MVC 3消息

2 个答案: