Javascript通过循环更新iframe src以下载多个文件

时间:2017-06-07 11:24:10

标签: javascript php iframe download

我的目标是在一个请求中同时通过php下载多个文件。我不能使用' zip'压缩文件的解决方案。所以我提出的解决方案是拥有一个空的iframe并动态更新源代码,以便iframe下载多个文件。

我有一个带iframe的基本页面,当用户点击他们下载的文件时,它会运行一个脚本,循环遍历所选文件并将iframe源更新为下载单个文件的php页面:

发送请求的页面:

<script>
function download_files(){
    // assume this is a loop which finds out all the files which were selected by the user
    for (var i = 0, len = selected_fileids.length; i < len; i++) {

        var fileid_single2 = selected_fileids[i].split("select_");
        fileid_splitted = fileid_single2[1];

        document.getElementById('iframe_downloader').src = "/index.php?page=download&fileid=" + id;

    }
}
</script>


<iframe src="" style="width:0;height:0;border:0; border:none;" id="iframe_downloader"></iframe>";

<!-- assume there will be checkboxes here which lets the user pick their files -->

<p onclick="download_files();">download</p>

php下载脚本,假设$ filepath和$ filename具有正确的值:

header("Pragma: ");
        header("Cache-Control: ");
        header("Content-Type: application/force-download");
        header("Content-Disposition: attachment; filename=\"{$row_filename}.xls\"");
        header("Content-Transfer-Encoding: binary");
        readfile($filepath);

基本上,脚本循环遍历所有选定的文件并不断更改源以尝试通过iframe下载所有文件。 我遇到的问题是,它似乎只是实际下载最后一个文件..我已经尝试调试它,我可以看到它正在循环所有项目,因为我可以console.log过程。但是,iframe实际上只触发了最后一个文件。

我尝试添加setInterval,这也不好。我看过小提琴手,我只能确认是否触发了最后一个文件。

1 个答案:

答案 0 :(得分:0)

您可以为每次下载创建一个iframe。这是Javascript中的解决方案:

<script>

function createFrame(url) {
    var frame = document.createElement("iframe");
    frame.setAttribute("src",url);
    frame.style.width  = "0";
    frame.style.height = "0";
    frame.style.border = "none";
    document.body.appendChild(frame);
}

function download_files() {
    var len = selected_fileids.length;
    for (var i = 0; i < len; i++) {
        var id = ....<incomplete original code>....;
        createFrame("/index.php?page=download&fileid="+id);
    }
}

</script>

<a href="#" onclick="download_files();return false;">download</a>

我必须警告这段代码未经测试,只是表明了这个想法。