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

Determine File Download Completion in a Browser

In this query, a user requests a solution to identify when a file download completes in a browser. This knowledge enables them to remove a "waiting" indicator displayed while the file generates.

The initial approach involved submitting a hidden form to the server using a POST request and targeting a hidden iframe for results. However, setting a "Content-Disposition: attachment" header with the file, which normally prompts the browser to show the "Save" dialog, did not trigger the desired "load" event in the iframe.

Alternatively, using a multi-part response partially solved the issue in Firefox by sending an empty HTML file along with the downloadable file. But it failed in Internet Explorer and Safari due to browser inconsistencies.

Client-Side JavaScript Solution

A more reliable solution lies in utilizing JavaScript on the client side:

1. Generate a unique token and submit it alongside the download request.
2. Display the "waiting" indicator.
3. Poll the server for the existence of a cookie containing the token.
4. Upon finding the cookie, hide the "waiting" indicator.

Server-Side Implementation

The server would examine the request for the unique token and, if present, drop a corresponding cookie.

Example Code

JavaScript (client-side):

[JavaScript code provided]

PHP (server-side):

[PHP code provided]

This approach effectively prevents multiple submit attempts and ensures that the "waiting" indicator is removed only when the download commences.

The above is the detailed content of How Can I Detect When a File Download is Complete in a Browser Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!