JavaScript 多文件下载

HTML5中 a 标签新增了一个属性 download，一般情况下，用户点击a链接浏览器会打开对应的链接地址，如果链接地址是一个文件如（xxx.rar、xxx.jpg、xxx.mp3、xxx.mp4）等，想要下载这个文件，此时就可以在a标签中加上 download 属性，然后点击该链接就不是打开这个该链了，而是直接下载链接地址的文件啦。

注意，这是HTML5中的新特性，所以低版本浏览器不兼容！

1、单个文件下载：以下载mp3为例：

【方式1】、在HTML中的a标签中加上download属性;

<a download="xxx.mp3的文件名" href="http://www.xxx.com/upload/xxx.mp3">音乐下载</a>

【方式2】、在JavaScript中调用模拟a标签下载功能

function download (e) {e.preventDefault(); // 去掉默认事件let a = document.createElement('a'); // 创建a标签let e = document.createEvent('MouseEvents'); // 创建鼠标事件对象e.initEvent('click', false, false); // 初始化事件对象a.href = 'https://www.xxx.com/download/xxx.rar' // 设置下载地址a.download = 'xxx文件名'; // 设置下载文件名a.dispatchEvent(e); //执行下载
};

2、多个文件批量下载：

同上面的单个文件下载原理一样，

不同点在于：

因为要下载多个文件，所以就模拟次点击事件，根据要下载的数量，进行循环生成a标签dom，并循环模拟点击下载事件。

实现方式1：


//将要进行多文件下载的mp3文件地址，以组数的形式存起来（这里只例了3个地址）
var mp3arr = ["http://www.xxx.com/xxx.mp3", "http://www.xx.com/xxx.mp3", "http://wwww.xxx.com/xxx.mp3"];// 下载方法
function downloadFn(name, href) {var a = document.createElement("a");// 创建a标签a.href = href;                  // 设置下载地址a.download = name;              // 设置下载文件名document.body.append(a);        // 把标签添加到文档中a.click();                      // 执行click(模拟点击下载)事件a.remove();                     // 删除a标签
};// 单个下载
function oddDownload() {downloadFn('我是第1个文件', mp3arr[0]);
};// 全部下载
function allDownload() {var index = 0;var times = setInterval(function () {(index < mp3arr.length) ? (downloadFn('第' + index + '个文件', mp3arr[index]), index++) : clearInterval(times);}, 1e3 || 1000);
};

实现方式2：

//将要进行多文件下载的mp3文件地址，以组数的形式存起来（这里只例了3个地址）
var mp3arr = ["http://www.xxx.com/xxx.mp3", "http://www.xx.com/xxx.mp3", "http://wwww.xxx.com/xxx.mp3"];// 下载方法
function downloadFn(name, href) {var a = document.createElement("a"),        // 创建a标签e = document.createEvent("MouseEvents");// 创建鼠标事件对象e.initEvent("click", false, false);     // 初始化事件对象a.href = href;                          // 设置下载地址a.download = name;                      // 设置下载文件名a.dispatchEvent(e);                     // 给指定的元素，执行click事件a.remove();                             // 删除a标签
};// 单个下载
function oddDownload() {downloadFn('我是第1个文件', mp3arr[0]);
};// 全部下载
function allDownload() {for (let index = 0; index < mp3arr.length; index++) {downloadFn('第' + index + '个文件', mp3arr[index]);};
};

关于JS中的：

自定义事件的定义和触发(createEvent, initEvent,dispatchEvent)

1、document.createEvent(eventType ) //创建新的 Event 对象。

参数：eventType 共5种类型：
Events ：包括所有的事件：

 HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'UIEevents ：包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'MouseEvents：包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'MutationEvents: 包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'

2、event.initEvent(eventType) //初始化新事件对象的属性在document.createEvent()后必须初始化，其对应的5种对应的初始化方法：

HTMLEvents 和 通用 Events：initEvent('type', bubbles, cancelable);UIEvents： initUIEvent('type', bubbles, cancelable, windowObject, detail);MouseEvents： initMouseEvent('type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);MutationEvents： initMutationEvent('type', bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange);

3. dom.dispatchEvent(event) //给节点分派一个合成事件。

在初始化完成后就可以随时触发需要的事件了，前面的dom就要触发事件的元素，

需要注意的是在IE 5.5+版本上请用fireEvent方法，还是浏览兼容的考虑

4. 其他事件例子
(1)、立即触发鼠标被按下事件

 var fireOnThis = document.getElementByIdx_x('someID');var evObj = document.createEvent('MouseEvents');evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null);fireOnThis.dispatchEvent(evObj);

(2) 、考虑兼容性的一个鼠标移动事件

 var fireOnThis = document.getElementByIdx_x('someID');if (document.createEvent) {var evObj = document.createEvent('MouseEvents');evObj.initEvent('mousemove', true, false);fireOnThis.dispatchEvent(evObj);};if (document.createEventObject) {fireOnThis.fireEvent('onmousemove');};

JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载相关推荐

JavaScript前端：与PDF.js结合，实现网页PDF内容批量下载
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 JavaScript前端:与PDF.js结合,实现网页PDF内容批量下载前言一.PDF.js是什么? 二.PDF.js单个PDF文 ...
文件转码（mp3\mp4\rmvb\avi\pdf\txt等）--Ubuntu小笔记
播放swf文件安装swf解码器 sudo apt-get install swfmill 如何保存串流视频(mms/rtsp) mplayer -dumpfile dump.rm -dumpstre ...
cef3 源码编译 2018-12 添加支持mp3 , mp4 的编译分支3282与最新的3578版
编译好的结果下载地址在最后 ========================================================================= 工作中需要使用cef3 ...
windows下编译cef最新版本并支持mp3/mp4
预读不懂就请参考官方地址一般要2步,下载和编译创建文件结构 ~/code/automate/ <-- 全部脚本放到这里automate-git.py <-- CEF build ...
python rtf转txt_将DOC、RTF格式文件批量转为TXT格式文件
Windows 下将目录下所有文件下的文件拷贝到一个目录中:搜索"." 安装python 及 win32com模块 pip install pypiwin32 创建LDA_RTF ...
asp.net 文件下载(txt,rar,pdf,word,excel,ppt)
aspx 文件下载说起来一点都不难,但是在做的过程中还是遇到了一些小小的问题,就是因为这些小小的问题,导致解决起来实在是太难了,其中一个就是Response.End();导致下载文件出现线程终止的情况 ...
MP3/MP4原理电路图下载全搜集
转贴 MP3/MP4原理电路图下载全搜集所有文件都是PDF格式炬力方案: 炬力最新主控ACU7513电路原理图下载 http://bbs.mydigit.cn/read.php?tid=4845 ...
mp3计算机无法识别,MP3\MP4连接windows电脑后无法识别怎么办
MP3\MP4是指音乐播放器,如果下载音乐要连接windows电脑,有的小伙伴经常出现连接电脑后无法识别的问题,出现这种情况的原因有很多,除了可能是MP3MP4的自身原因之外,也可能与电脑有关.这里小 ...
在线测试地址 mp3/mp4
mp3下载: http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3 http://downsc.chinaz.net/file ...

JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载

JavaScript 多文件下载

关于JS中的：

自定义事件的定义和触发(createEvent, initEvent,dispatchEvent)

JavaScript (mp3、mp4、jpg、doc、txt、rar)单个、多文件批量下载相关推荐

最新文章

热门文章