如何在下載文件時顯示並刪除加載的.gif文件？

我有一個按鈕，點擊時需要使用POST提交表單來下載文件。 [編輯澄清：正在下載的文件是通過基於隱藏表單中的值（我通過jQuery更改，取決於單擊的按鈕）中的值通過PHP腳本動態生成的。有問題的文件是一個Excel文件。如果可能，我不希望使用GET，因爲我不希望人們直接鏈接到文件。]如何在下載文件時顯示並刪除加載的.gif文件？

我無法使用$.post來提交表單，因爲這不起作用，因爲我願意。雖然提交發生得很好，但它不會觸發瀏覽器中的下載對話框。據我瞭解，該文件的內容現在存在於JavaScript中，並且沒有辦法（我知道）允許您將其從JavaScript下載到瀏覽器。所以，在這種特殊情況下，其他解決方案（例如How do I use jQuery or Ajax to swap the background image after a form is submitted?）將不起作用。

解決方案I found將使用$("#someform").submit();來點擊按鈕時觸發隱藏表單。頁面不會重新加載，屏幕上會彈出保存對話框。

示例代碼：

$("#button").click(
    function() { 
     $(this).removeClass("button"); 
     $(this).addClass("loading"); 
     $("#form").submit(); 
    } 
);

然而，因爲它可能需要幾秒鐘，以生成該文件，我想顯示加載動畫GIF給用戶。這現在提出了我可以顯示動畫的問題，但是我無法在提交表單後刪除動畫。

如果使用這種方法無法完成，有人可以提出更好的解決方案嗎？

來源

2011-09-02 Craig Sefton

您應該起到一個URL到gif或流呢編碼爲Base64

來源

2011-09-02 12:00:23 nurxyz

當你submit整個頁面將會刷新窗體，加載圖像一定會除非您不添加它刪除在頁面加載的其他地方。

來源

2011-09-02 12:16:05 ShankarSangoli

實際上，如果您使用上述鏈接中的方法進行測試，則頁面不會重新加載。 –

我已經在this question上發佈了一個答案，它演示瞭如何做到這一點。請參閱演示http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php和源文件http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

來源

2013-11-05 05:39:23 teynon

我已經完成了這與2 librairies在MIT許可證下：BinaryTransport和FileSaver。在這個例子中，我正在下載一個生成服務器端的Excel文件。

HTML（在頭標記）：

<script src="/E1/js/jquery.binarytransport.js" charset="UTF-8"></script> 
<script src="/E1/js/FileSaver.js" charset="UTF-8"></script>

的Javascript：

function ExportToExcel(urlExcel, fileName){ 
     $("body").css("cursor", "progress"); 
     $.ajax({ 
      url: urlExcel, 
      type: "GET", 
      dataType: 'binary', 
      headers:{'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','X-Requested-With':'XMLHttpRequest'}, 
      processData: false, 
      success: function(blob){ 
       $("body").css("cursor", "default"); 
       saveAs(blob, fileName); 
      }, 
      error : function(result, status, error){ 
       $("body").css("cursor", "default"); 
      } 
     }); 
}

對於自定義加載動畫，只是把它，我在這方面的變革光標類型：

$("body").css("cursor", "progress"); 
$("body").css("cursor", "default");

來源

2016-06-09 19:08:50 BigPino

如何在下載文件時顯示並刪除加載的.gif文件？

回答

相關問題