loadingwrapper在完成功能之前漸漸淡出

在我的MVC web應用程序中，jquery函數下面會上傳文件並在網格中顯示文件。在上傳時，我顯示一個加載包裝（用作進度條）。它的工作正常，但有時loadingWrapper在文件加載到網格之前漸漸淡出。請讓我知道如何顯示加載程序，直到文件上傳並在網格中刷新。loadingwrapper在完成功能之前漸漸淡出

查看：

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

來源

2015-03-19 lavanya b

側面說明：不要注入MVC值直接到你的Javascript。對於站點根目錄「@ Url.Contemt（」〜/「）''，只需將其存儲在全局變量中，以供所有腳本使用。調試Javascript在單獨的文件（不允許注入）中效果更好。 – 2015-03-19 09:39:04

重新解決您的基本問題：您似乎在執行文件上載，並且網格附件並行加載，因此無法控制上傳是在加載之前還是之後完成。如果您在淡入之前需要等待兩者，請使用「延遲」承諾。 – 2015-03-19 09:42:22

相關清爽電網XHR的事件監聽感動代碼和它的工作。文件上傳完成後，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);

來源

2015-03-19 13:29:25

你從來沒有提到你可以上傳然後下載。出於某種原因，我從您的代碼中假定您需要立即執行這兩個操作。我的壞 – 2015-03-19 14:44:03

哦。上傳文件後，我在網格中顯示文件詳細信息。有兩個選項可供下載和刪除 – 2015-03-20 09:35:05

@TrueBlueAussie：仍然我很驚訝，爲什麼延期不工作 – 2015-03-20 10:30:51

loadingwrapper在完成功能之前漸漸淡出

回答

相關問題