Javascript download multiple files with iframe

2019-08-18 01:51发布

问题:

I need to download multiple files with one button "download all",I don't want to zip them, i want to download them with javascript and hidden iframe,how I can do it? here is the example with iframe and javascript ,but I don't understand what url I need to send to ifrm.setAttribute( "src", url ) ;What is 'somefile.do'?

function makeFrame( url ) 
{ 
    ifrm = document.createElement( "IFRAME" ); 
    ifrm.setAttribute( "style", "display:none;" ) ;
    ifrm.setAttribute( "src", url ) ; 
    ifrm.style.width = 0+"px"; 
    ifrm.style.height = 0+"px"; 
    document.body.appendChild( ifrm ) ; 
}  

function downloadChecked( )
{
    for( i = 0 ; i < document.downloadform.elements.length ; i++ )
    {
        foo = document.downloadform.elements[ i ] ;
        if( foo.type == "checkbox" && foo.checked == true )
        {
            makeFrame('somefile.do?command=download&fileid=' + foo.name );
        }
    }
}

回答1:

You need to pass direct file URL (or URL which cause direct downloading) into iframe src. In your script case, somefile.do is probably some download handler and file ID and action is passed by it's parameters.

But back to your question, if you have files:

  • example.com/file1.zip
  • example.com/file2.zip
  • example.com/file3.zip

You have to pass it just into makeFrame function as a parameter:

makeFrame('http://example.com/file1.zip');

It will create iframe for every URL and start downloading (or display save dialog - depends on browser). Make sure to have files URLs in array and pass them in for loop.



回答2:

I would recommend the multiDownload jQuery plugin. It's also using iframes, and keeps your code tidy.

Example:

<a href="document1.zip" class="document">document 1</a>
<a href="document2.zip" class="document">document 2</a>
<a href="document3.zip" class="document">document 3</a>

<a href="#" id="download_all">download all</a>

$('#download_all').click(function (event) {
    event.preventDefault();
    $('.document').multiDownload();
});

And you're ready :)