zoukankan      html  css  js  c++  java
  • 文件夹下载插件webupload插件

    关于兼容性问题:

      <a href="xxx.docx" target='_blank'></a>

      下载文件时,这种写法是没有兼容性问题;但是下载图片时,IE 上会出现当前页面直接打开图片的问题,即便是加了 target='_blank'。

    单个文件批量下载

    方法一:H5 <a> 新特性

      HTML 5 里面为 <a> 标签添加了一个 download 的属性,我们可以轻易的利用它来实现下载功能。download 的属性值是可选的,它用来指定下载文件的文件名。

    <a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>

    方法二:js

    js 实现的思路是:

    添加 <a>标签

    用 JavaScript 创建一个隐藏的 <a> 标签

    设置它的 href 属性

    设置它的 download 属性

    用 JavaScript 来触发这个它的 click 事件

    实现代码:假设引入了 jquery.js

    var a = document.createElement('a');

    var url = window.URL.createObjectURL(blob);

    var filename = 'what-you-want.txt';

    href = url;

    download = filename;

    click();

    remove(); // 移除掉 <a>

    如果不用 H5 新特性,动态添加 <iframe>

      会独立打开一个窗口,发起该请求,当请求完成后,该界面会自动关闭。

     var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');

     frame.attr('src', url);

     $(document.body).append(frame);

     setTimeout(function() {

       frame.remove();

     }, 1000);

    兼容 IE 360兼容模式:

    如果文件不是 .png .gif .jpg 这种照片格式,可采用 window.open(url,  '_blank') 下载。

    function isIE() {

        if ( !! window.ActiveXObject || 'ActiveXObject' in window) {

            return true

        } else {

            return false

        }

    },

    function download() {

        let url = '../../../static/cds/files/研究方案及团队情况表.docx'

        if (this.isIE()) { // IE

            window.open(url, '_blank')

        } else {

            let a = document.createElement('a') // 创建a标签

            let e = document.createEvent('MouseEvents') // 创建鼠标事件对象

            e.initEvent('click', false, false) // 初始化事件对象

            href = url // 设置下载地址

            download = 'xxxx表' // 设置下载文件名

            dispatchEvent(e)

        }

    },

    批量下载多个文件:

    思路:将 url 放在一个数组里,循环数组并触发下载:

    let files = ['url1', 'url2'] // 所有文件

    files.forEach(url = >{

        if (this.isIE()) { // IE

            window.open(url, '_blank')

        } else {

            let a = document.createElement('a') // 创建a标签

            let e = document.createEvent('MouseEvents') // 创建鼠标事件对象

            e.initEvent('click', false, false) // 初始化事件对象

            href = url // 设置下载地址

            download = '' // 设置下载文件名

            dispatchEvent(e)

        }

    })

    使用down2的代码:

    批量下载文件

        $("#btn-down-files").click(function () {

            if (downer.Config["Folder"] == "") { downer.open_folder(); return; }

            var urls = [

                { fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }

                , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }

                , { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }

                , { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }

                , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }

                , { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }

                , { fileUrl: "http://res2.ncmem.com/res/images/img.png" }

            ];

            downer.app.addUrls(urls);

        });

    引入head头

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>donw2-多文件演示页面</title>

        <link type="text/css" href="js/down.css" rel="Stylesheet" />

        <script type="text/javascript" src="js/jquery-1.4.min.js"></script>

        <script type="text/javascript" src="js/down.app.js" charset="utf-8"></script>

        <script type="text/javascript" src="js/down.edge.js" charset="utf-8"></script>

        <script type="text/javascript" src="js/down.file.js" charset="utf-8"></script>

        <script type="text/javascript" src="js/down.folder.js" charset="utf-8"></script>

        <script type="text/javascript" src="js/down.js" charset="utf-8"></script>

    </head>

    详细配置信息可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/28/php%e6%96%87%e4%bb%b6%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/

  • 相关阅读:
    键盘移动小div(js原生)
    递归好理解,可是不好用啊
    jsonp
    闭包
    json
    来个小例子(ajax)
    ajax小demo
    制作H5响应式页面注意事项、微信二次分享
    Button按钮--inject与provide
    webpack基本打包配置流程
  • 原文地址:https://www.cnblogs.com/songsu/p/13402729.html
Copyright © 2011-2022 走看看