>웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용하여 브라우저에서 파일 다운로드가 완료된 시기를 어떻게 감지할 수 있습니까?

JavaScript를 사용하여 브라우저에서 파일 다운로드가 완료된 시기를 어떻게 감지할 수 있습니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-19 11:50:11307검색

How Can I Detect When a File Download is Complete in a Browser Using JavaScript?

브라우저에서 파일 다운로드 완료 확인

이 쿼리에서 사용자는 브라우저에서 파일 다운로드가 완료되는 시기를 식별하는 솔루션을 요청합니다. . 이러한 지식을 통해 파일이 생성되는 동안 표시되는 "대기 중" 표시기를 제거할 수 있습니다.

초기 접근 방식에서는 POST 요청을 사용하여 서버에 숨겨진 양식을 제출하고 결과를 위해 숨겨진 iframe을 대상으로 지정하는 것이 포함되었습니다. 그러나 일반적으로 브라우저에 "저장" 대화 상자를 표시하라는 메시지를 표시하는 파일에 "Content-Disposition: attachment" 헤더를 설정하면 iframe에서 원하는 "로드" 이벤트가 트리거되지 않습니다.

또는, 다중 부분 응답을 사용하면 다운로드 가능한 파일과 함께 빈 HTML 파일을 보내 Firefox의 문제를 부분적으로 해결했습니다. 하지만 Internet Explorer와 Safari에서는 브라우저 불일치로 인해 실패했습니다.

클라이언트측 JavaScript 솔루션

보다 안정적인 솔루션은 클라이언트측에서 JavaScript를 활용하는 것입니다.

  1. 고유한 토큰을 생성하여 다운로드 요청과 함께 제출하세요.
  2. 표시 "대기" 표시.
  3. 토큰이 포함된 쿠키가 있는지 서버에 폴링합니다.
  4. 쿠키를 찾으면 "대기" 표시를 숨깁니다.

서버측 구현

서버는 고유 토큰에 대한 요청을 검사하고, 현재 해당 쿠키를 삭제합니다.

예제 코드

JavaScript(클라이언트 측):

[JavaScript 코드 제공]

PHP(서버측):

[PHP 코드 제공]

이 접근 방식은 여러 번의 제출 시도를 효과적으로 방지하고 다운로드가 시작될 때만 "대기" 표시가 제거되도록 합니다.

위 내용은 JavaScript를 사용하여 브라우저에서 파일 다운로드가 완료된 시기를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.