Download File Using jQuery


Jquery Problem Overview

How can I prompt a download for a user when they click a link.

For example, instead of:

<a href="uploads/file.doc">Download Here</a>

I could use:

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

This way, Google does not index my HREF's and private files.

Can this be done with jQuery, if so, how? Or should this be done with PHP or something instead?

Jquery Solutions

Solution 1 - Jquery

I might suggest this, as a more gracefully degrading solution, using preventDefault:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';

<a href="no-script.html">Download now!</a>

Even if there's no Javascript, at least this way the user will get some feedback.

Solution 2 - Jquery

If you don't want search engines to index certain files, you can use robots.txt to tell web spiders not to access certain parts of your website.

If you rely only on javascript, then some users who browse without it won't be able to click your links.

Solution 3 - Jquery

Here's a nice article that shows many ways of hiding files from search engines:
> <>

JavaScript isn't a good way not to index a page; it won't prevent users from linking directly to your files (and thus revealing it to crawlers), and as Rob mentioned, wouldn't work for all users.
An easy fix is to add the rel="nofollow" attribute, though again, it's not complete without robots.txt.

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

Solution 4 - Jquery

 var link=document.createElement('a');

Solution 5 - Jquery

Yes, you would have to change the window.location.href to the url of the file you would want to download.

window.location.href = '';

Solution 6 - Jquery

  • Using jQuery function

         var valFileDownloadPath = 'http//:'+'your url';
    , '_blank');

Solution 7 - Jquery

By stating window.location.href = 'uploads/file.doc'; you show where you store your files. You might of course use .htacess to force the required behaviour for stored files, but this might not always be handful....

It is better to create a server side php-file and place this content in it:

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);

This code will return ANY file as a download without showing where you actually store it.

You open this php-file via window.location.href = 'scripts/this_php_file.php?f=downloaded_file';

Solution 8 - Jquery

Hidden iframes can help

Solution 9 - Jquery

I suggest you use the mousedown event, which is called BEFORE the click event. That way, the browser handles the click event naturally, which avoids any code weirdness:

(function ($) {

    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);


Solution 10 - Jquery

See here for a similar post on using jQuery to clear forms:

You may also be running into an issue where the values are being repopulated by the struts value stack. In other words, you submit your form, do whatever in the action class, but do not clear the related field values in the action class. In this scenario the form would appear to maintain the values you previously submitted. If you are persisting these in some way, just null each field value in your action class after persisting and prior to returning SUCCESS.

Solution 11 - Jquery

You can do this with html5 very easily:

var link = document.createElement('a');
link.href = "/WWW/test.pdf"; = "file_" + new Date() + ".pdf";;


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDodinasView Question on Stackoverflow
Solution 1 - Jquerykarim79View Answer on Stackoverflow
Solution 2 - JqueryRobView Answer on Stackoverflow
Solution 3 - JqueryKobiView Answer on Stackoverflow
Solution 4 - JqueryEL missaoui habibView Answer on Stackoverflow
Solution 5 - JqueryMacAnthonyView Answer on Stackoverflow
Solution 6 - JqueryGanganath RathnasekaraView Answer on Stackoverflow
Solution 7 - JqueryOtvazhniiView Answer on Stackoverflow
Solution 8 - JqueryletronjeView Answer on Stackoverflow
Solution 9 - JquerylingView Answer on Stackoverflow
Solution 10 - JqueryRussell ShingletonView Answer on Stackoverflow
Solution 11 - JqueryLuca ZieglerView Answer on Stackoverflow