Question

在我的MVC Web应用程序中，下面的jquery函数将上传文件并在网格中显示该文件。在上传时，我正在显示一个加载包装器（充当进度条）。它工作正常，但有时loadwrapper在文件加载到网格之前逐渐淡出。请让我知道如何显示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将立即执行。以下链接很有帮助 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在完成功能之前获得淡出

1 个答案: