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文件下载的更多相关文章

  1. 【Servlet】java web 文件下载功能实现

    需求:实现一个具有文件下载功能的网页,主要下载压缩包和图片 两种实现方法: 一:通过超链接实现下载 在HTML网页中,通过超链接链接到要下载的文件的地址 <!DOCTYPE html> & ...

  2. Java Web文件下载

    Web文件下载有两种.一种是文件在站点文件夹下.在浏览器中直接输入文件路径就可以下载.如http://www.xxx.com/file.zip.第二种是文件不在站点文件夹下或者文件是动态生成的(导出报 ...

  3. JAVA WEB ------ 文件下载及导出数据到office Execl表格

    文件下载需要五步: 1.设置文件ContentType类型 // 设置文件ContentType类型,这样设置,会自动判断下载文件类型 response.setContentType("mu ...

  4. web文件下载(附方案及源码配置)

    1. 场景描述 因项目需查询数据量比较大(需要查询Hbase等nosql数据库),采用用户点击查询后,后台查询并生成查询文件:然后消息通知用户后,用户点击下载的方式来满足用户需求. 2. 解决方案 W ...

  5. 较友好的Web文件下载用户体验实例

    1.实际需求整理与分析 该问题起源于为公司做的一个B/S架构的游戏静态数据管理工具,其中有一个需求是点击页面上的一些按钮要下载文件,可能根据按钮类型的不同需要转换下载.json..zip..xlsx等 ...

  6. java web文件下载功能实现 (转)

    http://blog.csdn.net/longshengguoji/article/details/39433307 需求:实现一个具有文件下载功能的网页,主要下载压缩包和图片 两种实现方法: 一 ...

  7. Java web 文件下载

    /** * 下载文件 * @param msg */ public boolean printOutFile(String fileFullName,String fileName) { if (fi ...

  8. web 文件下载(.shp)

    1. Open IIS Manager2. Select MIME Types 3. In the right pane, click Add…4. Enter the following infor ...

  9. web 文件下载

    response.reset(); response.setContentType("octets/stream"); response.addHeader("Conte ...

随机推荐

  1. SpringBoot+Swagger整合API

    SpringBoot+Swagger整合API Swagger:整合规范的api,有界面的操作,测试 1.在pom.xml加入swagger依赖 <!--整合Swagger2配置类--> ...

  2. delphi Ctrl+鼠标左键或者Find Declaration不能定位到源文件

    在Delphi代码编辑器中使用Ctrl+鼠标左键可跳转到鼠标下的类所在的定义处,但今天发现一个奇怪的问题,EhLib组件的类无法跳转(包括uses中的pas文件),重新安装也是如此,后来经过验证,发现 ...

  3. vue 源代码创建tabs

    <ul class="tabs"> <li class="li-tab" v-for="(item,index) in tabsPa ...

  4. pragma警告处理

    使用pragma消除警告 (绝不可强行消除,因为有可能是个运行时错误) #pragma clang diagnostic push #pragma clang diagnostic ignored & ...

  5. 观察者模式 vs 发布-订阅模式

    我曾经在面试中被问道,_“观察者模式和发布订阅模式的有什么区别?” _我迅速回忆起“Head First设计模式”那本书: 发布 + 订阅 = 观察者模式 “我知道了,我知道了,别想骗我” 我微笑着回 ...

  6. 夜神模拟器调试web APP

    前言:之前工作之余的时间自己做了一个web APP,但是都是在浏览器上调试的,这次想看看在手机上啥效果,所以下载了一个夜神模拟器 一.下载夜神模拟器 https://www.yeshen.com/ 二 ...

  7. SQL学习指南第四篇

    SQL必知必会(第4版)学习笔记 插入数据 插入有几种方式: 插入完整的行 插入行的一部分 插入某些查询的结果(INSERT SELECT) 注意:省略列 如果表的定义允许,则可以在 INSERT 操 ...

  8. UVA11825 黑客的攻击 Hackers' Crackdown 状压DP,二进制,子集枚举

    题目链接Click Here [题目描述] 假如你是一个黑客,侵入了一个有着\(n\)台计算机(编号为\(1.2.3....n\))的网络.一共有\(n\)种服务,每台计算机都运行着所有服务.对于每台 ...

  9. npm install 时出现的 EACCES: permission denied 错误的可能有效的解决方案

    最近我开始接触手机 app 的编写,公司用到了 Nativescript.当我下载了公司的项目后,在配置时出现了不少的问题,其中出现概率最高的就是 EACCES: permission denied ...

  10. STM32的内存管理

    ref:https://www.cnblogs.com/leo0621/p/9977932.html 这里针对STM32F407芯片+1M外部内存的内存管理!(全篇是个人愚见,如果错误,请不吝指出!) ...