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

Question

当我点击提交按钮“input type="submit" id="submit" value="Save"”。 它开始上传我从硬盘中选择的文件。 不过，这一切都无关紧要，因为我制作了一个带有“上传”文本的 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（我在这里调用了它的 id yourContainerId）并显示它。

如果它不起作用，它应该返回一个错误，这可能有助于我们了解正在发生的事情。如果您在问题上发布您的客户代码，也可能会更容易。也许您的代码中存在一些错误，导致执行无法到达您尝试显示消息的代码。

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

    }

});