zoukankan      html  css  js  c++  java
  • jQuery多文件下载

    业务场景是一条数据对应多个文件,需要一次性全部下载,不考虑在服务端把多个文件打包下载,想通过js点击事件向服务端发送多个请求进行下载。在网上找了一篇文章http://www.2cto.com/kf/201501/367538.html,参照它的内容开始写代码。

    (function ($) {
      var methods = {
        _download: function () {

          this.each(function (index, item) {
            methods._createLink(item);
          });

      },
      //download属性设置 
      _createLink: function (url, triggerDelay, removeDelay) {
      var content = document.getElementById("content");

      var aLink = document.createElement("a");
      content.appendChild(aLink);
      aLink.download = "";


      aLink.onclick = function () {
        window.open(url);

      } 

      if (document.createEventObject) {
        // IE浏览器支持fireEvent方法
        var evt = document.createEventObject();
        if (aLink.fireEvent) {
          aLink.fireEvent("onclick");
        }
      }
      else {
        // 其他标准浏览器使用dispatchEvent方法
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent("click", true, true);
        aLink.dispatchEvent(evt);
      }

     }
    };

      $.fn.multiDownload = function () {
        methods._download.apply(this, arguments);
      };

    })(jQuery);

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/download.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    $("#download").click(function () {
    var downloadUrl = ['download.aspx?id=1', 'download.aspx?id=2'];
    $(downloadUrl).multiDownload();

    });
    }); 
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <a id='download' href="#">下载</a> 
    <div id="content"></div>
    </form>
    </body>
    </html>

    download.aspx代码:

    protected void Page_Load(object sender, EventArgs e)
    {
    string str = string.Empty;
    if (!string.IsNullOrEmpty(Request["id"]))
    {
    if (Request["id"] == "1") str = "one";
    if (Request["id"] == "2") str = "two";
    }

    byte[] bytes = System.Text.Encoding.Default.GetBytes(str);

    Response.ContentType = "application/octet-stream";
    //通知浏览器下载文件而不是打开
    Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(str + ".txt", System.Text.Encoding.UTF8));
    Response.BinaryWrite(bytes);
    Response.Flush();
    Response.End();
    }

    到此两个文件可以同时下载了。

    在整个过程中碰到的问题:

    1.各浏览器兼容的事件驱动器函数

    IE9+,标准浏览器:dispatchEvent;IE8-:fireEvent;

    2.动态创建元素元素语法报错

    一个动态创建的元素对应一个下载文件,事先不知道需要下载多少个文件,所以需要使用动态创建元素。

    通过var link= document.createElement("a")创建的元素,在IE8中调用link元素的事件驱动函数时,报未知名的错误,如:link.fireEvent("onclick");

    在IE9+中调用link元素的事件驱动函数时,语法正常,但是没有触发事件,如:link.dispatchEvent("click");

    标准浏览器中正常;

    解决方案:在表单中通过html标签创建一个div元素,将动态创建的元素添加到div元素中,上面的问题就解决了,但是没有找原理,欢迎指点。

    3.下载文件方式

    超链接.href=下载文件url;

    标准浏览器正常,IE9+只能下载最后一个文件,IE8-没有反应;

    window.location.href=下载文件url;

    各种浏览器都只能下载最后一个文件,经验证,它是等函数中所有代码都执行完成在执行跳转,所以最后一次的url会把前面的url覆盖;

    window.open(下载文件url)

    各种浏览器终于都能正常下载,因为我这边在被下载页面中显示声明输出的下载文件,如:Response.AddHeader("Content-Disposition","attachment..."); 但是如果直接下载图片或者txt文件,会直接在浏览器中显示出来,待解决。

  • 相关阅读:
    mouse_event模拟鼠标滚轮
    润乾报表配置技术路线
    建筑 物件 开心背单词 读句子,单词,字母,看图例, 翻译,看动画
    文字过渡动画,曲线过渡动画,,使用这个插件assign shape keys
    运动锻炼 开心背单词 读句子,单词,字母,看图例, 翻译,看动画,学英语,轻松背单词,简单背单词
    blender293 内置插件 精度绘画控件,PDT学习003,pdt tangents 切线
    日常用品 背单词 读句子 看图片 读单词 读字母 翻译, 看动画 学英语
    blender293 内置插件 精度绘画控件,PDT学习 precision drawing tools
    乔布斯 背单词 02 读句子 单词 字母 翻译,看动画 学英语 名言 我菜顾我在,我菜故我在,blender加python
    狐狸 和 乌鸦 英语 朗读句子 背单词
  • 原文地址:https://www.cnblogs.com/DoNetCShap/p/8789540.html
Copyright © 2011-2022 走看看