web页面实现文件下载的几种方法

今天碰到文件下载的一些问题，本着知其然也要知其所以然的精神，站在巨人的肩膀上深入学习和测试了一下，抛砖引玉，现在总结结论如下：

1）标准URL下载方式
可以通过在web页面中嵌入 url超级链接，标准的HTTP GET请求，形如：“http://www.wjj.cc/test.zip” 的方式来下载。对于服务器端web根目录有一个test.zip的文件。不解释了，*都明白，看不明白就也没有必要去搞IT了。
说明：此种方法的弊端是完全暴露了文件test.zip的网站路径，而且动态性不够灵活。网上已经很多资料，不多说了。

2）通过服务器端脚本向浏览器方（stdout）输出二进制流的方式下载。比如 html页面中嵌入URL为：http://www.wjj.cc/download.php&f=test.zip ，此方法是GET方式请求，URL完全可以获取到。
说明：上述方法可以在服务器端通过脚本程序 download.php ，并且根据传入的查询字符串f=test.zip定位服务器上文件系统test.zip的路径，然后按二进制流的方式发送给客户端浏览器，那么客户端浏览器就会弹出一个“下载对话框”了。
另一种方式是通过提交表单，用POST方式提交参数到服务器端动态脚本，然后服务器端脚本返回输出的二进制流到浏览器实现下载。尤其是当需要下载的文件(可能不一定是服务器上文件系统中具体的文件，有可能是服务器动态生成的数据) 依赖于客户端提交的很多参数选项的时候，采用POST下载的方式是最多的。

下面重点讲述通过动态脚本实现下载的一些例子，下面的例子中均没有给出服务器端动态脚本的处理代码：

1. GET URL下载链接，可以直接嵌入到 <a href="URL...">下载</a> 。
2. POST的URL下载链接，可以通过设置<form>表单的action 以及表单元素值来完成下载。
3. 如果是GET方式的url下载链接，客户端可以通过一个动态生成的隐藏的iframe来得到下载的二进制文件。原理是：iframe有一个src属性，其本质就是发送http请求，GET一个页面或者数据。javascript如下：
function download(){
           var IFrameRequest=document.createElement("iframe");
           IFrameRequest.id="IFrameRequest";
           IFrameRequest.src="/test.zip";
           IFrameRequest.style.display="none";
           document.body.appendChild(IFrameRequest);
}

4. 用动态生成的form元素，实现表单提交，开完成下载。注意：此方法不是ajax哦。
参考url：http://www.cnblogs.com/sydeveloper/archive/2013/05/14/3078295.html
要说明的是，这里的原理仅仅是form提交表单，而不是ajax。

由于jQuery的ajax函数、及ajaxSubmit等函数的返回类型（dataType）只有xml、text、json、html等类型，没有“流”类型，故我们要实现ajax下载时，不能够使用相应的ajax函数进行文件下载。

在网上看了一些文章，发现可以通过js生成一个form，用这个form提交参数，并返回“流”类型的数据。在实现过程中，页面也没有进行刷新。

请看实例：

　var form = $("<form>");   //定义一个form表单

       form.attr(\'style\',\'display:none\');   //下面为在form表单中添加查询参数

       form.attr(\'target\',\'\');

       form.attr(\'method\',\'post\');

       form.attr(\'action\',"exportSms");

      

       var input1 = $(\'<input>\'); 

       input1.attr(\'type\',\'hidden\'); 

       input1.attr(\'name\',\'exportPostTime\'); 

       input1.attr(\'value\',timeString); 

      

       $(\'body\').append(form);  //将表单放置在web中

       form.append(input1);   //将查询参数控件提交到表单上

       form.submit();   //表单提交

5. 我在Asterisk中实现批量下载录音的js代码和php代码
javascript代码如下：
　　　　　

　//批量下载录音
        function batchDownloadRecording(){
            var rows = $(\'#taskRecords_search\').datagrid(\'getSelections\');
            var form = $("<form>");
            form.attr(\'style\',\'display:none\');
            form.attr(\'target\',\'\');
            form.attr(\'method\',\'post\');
            form.attr(\'action\',"index.php?m=SystemReport&a=batchDownloadRecording");
            $(\'body\').append(form);
            //构建表单
            var rows = $(\'#taskRecords_search\').datagrid(\'getSelections\');
            for (var i = 0; i < rows.length; i++){
                var input = $(\'<input>\');
                input.attr(\'type\',\'checkbox\');
                //input.attr(\'name\',\'selectlist\');
                input.attr(\'name\',\'selectlist[]\'); //非常重要，这里必须加上[],因为是checkbox表单数组
                input.attr(\'value\',rows[i].userfield);
                //alert(rows[i].userfield);
                input.attr(\'checked\',true);//非常重要，这里一定要选中，否则服务器端收到的是空数组
                form.append(input);
            }
            form.submit();
        }

web服务器端php代码如下：
　　　　　　//批量下载录音
    　　function batchDownloadRecording(){
        $arrUF = $_POST[\'selectlist\'];
        //dump($arrUF);die;
        $monitorDir = \'/var/spool/asterisk/monitor\';
        header(\'HTTP/1.1 200 OK\');
        header(\'Date: \' . date("D M j G:i:s T Y"));
        header(\'Last-Modified: \' . date("D M j G:i:s T Y"));
        header("Content-Type: application/force-download");
        header("Content-Transfer-Encoding: Binary");
        header("Content-Disposition: attachment;filename=Recording-" .Date(\'Ymd-His\') .".tar.gz");
        $cmd = "cd $monitorDir;tar -zcf - ";
        foreach($arrUF AS $uf){
            $arr = explode("_",$uf);
            $arr = explode(".",$arr[2]);
            $timestamp = $arr[0];
            //要转化成mp3文件
            $wavFile = Date(\'Y-m\',$timestamp) ."/" .Date(\'d\',$timestamp) ."/" .str_replace(".wav",".mp3",$uf);
            //echo $wavFile;die;
            if(file_exists($monitorDir ."/" .$wavFile)){
                $cmd .= $wavFile ." ";
            }
        }
        //echo $cmd;die;
        system($cmd);
    }

秒客网

web页面实现文件下载的几种方法

相关文章