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

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');
	};