loadingwrapper 在完成功能之前逐渐淡出

Question

在我的 MVC 网络应用程序中，下面的 jquery 函数将上传文件并在网格中显示文件。上传时，我显示了一个加载包装器（充当进度条）。它工作正常，但有时 loadingwrapper 在文件加载到网格之前会淡出。请让我知道如何显示 loadwrapper，直到文件上传并在网格中刷新。

查看：

    <div id="loadingwrapper">
    <div id="loadingcontent">
        <p id="loadingspinner">
            <img src="~/Images/load-indicator.gif" />
        </p>
    </div>

脚本：

  $("#lnkAddAttachment").click(function (e) {

        oFiles = document.getElementById("txtFile").files[0];
        nFiles = oFiles.size;

        var selectedFile = document.getElementById("txtFile").files[0];

        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        var url = '@Url.Content("~/")' + "ESignature/getFile";
        fd.append("file", document.getElementById('txtFile').files[0]);

        $("#loadingwrapper").fadeIn();

        xhr.open("POST", url, true);
        xhr.send(fd);
        xhr.addEventListener("load", function (event) {
        }, false);
        var url = '@Url.Content("~/")' + "ESignature/Registration";

        $('#gridAttachments').load(url + ' #gridAttachments', function () {
                        $("#loadingwrapper").fadeOut();
                    });

            return false; 
    });

Answer 1

将与刷新网格相关的代码移动到 xhr 的 EventListener 并且它有效。一旦文件上传完成，Load 的 addEventListener 就会执行。 link 以下有帮助 https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

感谢 TrueBlueAussie 一直以来的支持

 xhr.addEventListener("load", function (event) {
 var url = '@Url.Content("~/")' + "ESignature/Registration";
 $('#gridAttachments').load(url + ' #gridAttachments');
                $("#loadingwrapper").fadeOut();
 }, false);

loadingwrapper 在完成功能之前逐渐淡出

loadingwrapper getting fadeout before completing the functionality

jquery

asp.net-mvc-4