파일을 다운로드 할 때로드하는 .gif를 표시하고 제거하는 방법은 무엇입니까?

Question

버튼을 클릭하면 POST를 사용하여 양식을 제출하여 파일을 다운로드해야합니다. [명확하게 편집 : 다운로드되는 파일은 숨겨진 양식 (클릭 한 단추에 따라 jQuery를 통해 변경) 내의 값을 기반으로 PHP 스크립트를 통해 동적으로 생성됩니다. 해당 파일은 Excel 파일입니다. 사람들이 직접 파일에 링크하기를 원하지 않기 때문에 가능한 경우 GET을 사용하지 않는 것이 좋습니다.]

$.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를 표시하고 싶었다. 이제 애니메이션을 표시 할 수 있지만 양식을 제출 한 후에 애니메이션을 제거 할 수 없다는 문제점이 있습니다.

이 방법을 사용하여 수행 할 수없는 경우 누군가가 제안 할 수있는 더 나은 해결책이 있습니까?

Answer 1

당신은 Base64로 엔코딩 된 .gif 참고로 URL을 제공하거나 스트리밍해야 하나

당신이 그것을 추가하지 않는 한 당신 submit 페이지 전체가 새로 고침 것입니다 양식, 로딩 이미지가 확실히 제거됩니다

Answer 2

페이지로드시 어딘가에 있습니다.

Answer 3

응답을 게시하는 방법을 보여주는 this question에 게시했습니다. 데모보기 http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php 및 소스 파일 http://tomsfreelance.com/stackoverflow/imageDownloadLoading/

Answer 4

나는 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> 

자바 스크립트 : 사용자 정의 로딩 애니메이션

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