Download file from http url by JQuery Ajax

Question

I have on html page input type text. I want paste URL, on example http://www.quicksprout.com/images/foggygoldengatebridge.jpg in this text field and click button "download" and download this file to my computer. I want want to realize this with AJAX. Maybe do you know some AJAX plugins or code that could realize downloading file from HTTP URL?

Bugfixer · Accepted Answer · 2015-06-20 11:11:17Z

2

First MEthod

function SaveToDisk(fileURL, fileName) {
                //alert("yes i m working");
                // for non-IE
                if (!window.ActiveXObject) {
                    var save = document.createElement('a');
                    save.href = fileURL;
                    save.target = '_blank';
                    save.download = fileName || 'unknown';

                    var evt = new MouseEvent('click', {
                        'view': window,
                        'bubbles': true,
                        'cancelable': false
                    });
                    save.dispatchEvent(evt);

                    (window.URL || window.webkitURL).revokeObjectURL(save.href);
                }

                // for IE < 11
                else if ( !! window.ActiveXObject && document.execCommand)     {
                    var _window = window.open(fileURL, '_blank');
                    _window.document.close();
                    _window.document.execCommand('SaveAs', true, fileName || fileURL)
                    _window.close();
                }
           }

Second MEthod

function downloadme(x,y){

        myTempWindow = window.open(x,'','left=10000,screenX=10000');
        myTempWindow.document.execCommand('SaveAs','null',y);
        myTempWindow.close();
    }

answered Jun 20, 2015 at 11:11

Bugfixer

2,6272 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Patrick Roberts Over a year ago

Browsers are usually sophisticated enough to block anchor tags clicked with generated mouse events, be aware of this limitation.

mvoron Over a year ago

first method works, thanks, but how in this code I can change directory to save file?

Bugfixer Over a year ago

@mvoron - This is force downloading buddy.

Bugfixer Over a year ago

@mvoron - Check your browser download folder.You can change it if you want.eg. link

Johnny Over a year ago

thanks for the first method. it saves the files as "unknown" I changed it to fileURL it saved it as "http---localhost-ieltsmaster-gtreading-workbook-Activity_3_1.pdf" Any idea how to fix it?

|

Patrick Roberts · Accepted Answer · 2015-06-20 11:03:24Z

1

You don't need AJAX to do that, nor would you be able to because of CORS limitations. Instead try something like this.

HTML:

<input type="text" placeholder="URL" id="url"/>
<input type="text" placeholder="Filename" id="name"/>
<a id="download">Download Link</a>

JavaScript:

var url = document.getElementById('url'),
    name = document.getElementById('name'),
    a = document.getElementById('download');

a.addEventListener('click', function () {
    this.setAttribute('src', url.value);
    this.setAttribute('download', name.value);
});

answered Jun 20, 2015 at 11:03

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

Collectives™ on Stack Overflow

Download file from http url by JQuery Ajax

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related