jQuery多文件下载

文件下载是一个Web中非常常用的功能，不过你是做内部管理系统还是做面向公众的互联网公司都会遇到这个问题，对于下载一般有点实际开发经验的都会自己解决，上周弄了一下多文件下载，业务场景就是一条数据详细信息一个附件原来只需要一个pdf就行，现在要求添加两张图片，一次性的下载出来，之前没遇到这种问题。网上找了找，有了思路，就是需要隐藏一个iframe，然后设置src，大概的原理是这样的，之后自己开始动手撸代码去了:

业务场景来源于公司的一个客户管理系统，为了以后其他地方也能调用，扩展了一下方法:

<code>(function($) {</code>

<code> </code><code>var</code> <code>methods = {</code>

<code> </code><code>_download: function(options) {</code>

<code> </code><code>var</code> <code>triggerDelay = (options && options.delay) || 100;</code>

<code> </code><code>var</code> <code>removeDelay = (options && options.removeDelay) || 1000;</code>

<code> </code><code>this</code><code>.each(function(index, item) {</code>

<code> </code><code>methods._createIFrame(item, index * triggerDelay, removeDelay);</code>

<code> </code><code>_createIFrame: function(url, triggerDelay, removeDelay) {</code>

<code> </code><code>//动态添加iframe，设置src，然后删除</code>

<code> </code><code>setTimeout(function() {</code>

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

<code> </code><code>frame.attr(</code><code>'src'</code><code>, url);</code>

<code> </code><code>$(document.body).after(frame);</code>

<code> </code><code>setTimeout(function() {</code>

<code> </code><code>frame.remove();</code>

<code> </code><code>}, removeDelay);</code>

<code> </code><code>}, triggerDelay);</code>

<code> </code><code>$.fn.multiDownload = function(options) {</code>

<code> </code><code>methods._download.apply(</code><code>this</code><code>, arguments);</code>

<code>})(jQuery);</code>

上面的代码没什么注释，iframe会加载src的内容，以上的程序调用很简单,这个数组的里面的地址放的是服务器请求的地址，需要保证一点的就是服务器的原来这个地址是可以下载文件的：

<code>var</code> <code>downloadUrl=[</code><code>'服务器请求地址1'</code><code>,</code><code>'服务器请求地址2'</code><code>];</code>

<code> </code><code>$(downloadUrl).multiDownload();</code>

　当时完成这个功能很顺利，然后前天我想写篇博客记录一下，但我比较懒，懒的写服务端代码，直接把文件放在本地，去请求一下，企图获得同样的结果，失败了，先来看行代码:

<code><a href=</code><code>"Content/keso1.zip"</code><code>>zip文件</a></code>

这个链接我们点击一下直接下载了zip文件，但是如果你改成xx.jpg,xx.txt，因为浏览器根据 MIME TYPE(资源的媒体类型)，如果请求的是后台服务器需要指定一下Content-type，处理本地的文件，没法告诉浏览器某个文件的 MIME Type 的情况下，浏览器也会做一些默认的处理，这和个人的操作系统中给文件配置的 MIME Type 有关。本人电脑是Window，如果需要看具体Content-type，详细地址如下:

所以通常图片和文本有的时候就直接打开显示，而rar，zip文件浏览器不识别Content-type当做文件下载；

为了能直接下载这个图片，找到了Html5中有一个download属性，如果你将一个a标签加上一个download属性，jpg文件直接当做文件下载了，href就是图片地址，浏览器兼容没有测试，毕竟5来日方长：

　　这个时候就可以动手该原来的代码,如果点击的时候直接这个方法是可以自动下载文件的,单文件下载之后就可以进行多文件下载啦:

<code>function downloadHtml5(url){</code>

<code> </code><code>var</code> <code>aLink = document.createElement(</code><code>'a'</code><code>);</code>

<code> </code><code>, evt = document.createEvent(</code><code>"HTMLEvents"</code><code>);</code>

<code> </code><code>evt.initEvent(</code><code>"click"</code><code>);</code>

<code> </code><code>aLink.download =</code><code>""</code><code>;</code>

<code> </code><code>aLink.href =url;</code>

<code> </code><code>aLink.dispatchEvent(evt);</code>

　　修改扩展方法:

<code> </code><code>if</code> <code>(options.source === </code><code>"server"</code><code>) {</code>

<code> </code><code>this</code><code>.each(function(index, item) {</code>

<code> </code><code>if</code> <code>(options.source === </code><code>"local"</code><code>) {</code>

<code> </code><code>methods._createLink(item, index * triggerDelay, removeDelay);</code>

<code> </code><code>//download属性设置</code>

<code> </code><code>_createLink: function(url, triggerDelay, removeDelay) {</code>

<code> </code><code>var</code> <code>aLink = document.createElement(</code><code>"a"</code><code>),</code>

<code> </code><code>evt = document.createEvent(</code><code>"HTMLEvents"</code><code>);</code>

<code> </code><code>evt.initEvent(</code><code>"click"</code><code>);</code>

<code> </code><code>//需要添加属性，不需要设置文件名，个人测试就是原文件名，设为空没有问题，具体情况具体分析</code>

<code> </code><code>aLink.download = </code><code>""</code><code>;</code>

<code> </code><code>aLink.href = url;</code>

<code> </code><code>aLink.dispatchEvent(evt);</code>

　　最终代码调用，六个文件都可以下载:

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

<code> </code><code><title>JQuery文件下载</title></code>

<code> </code><code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"jquery-1.11.1.js"</code><code>></script></code>

<code> </code><code><script type=</code><code>"text/javascript"</code> <code>src=</code><code>"jquery.multidownload-FlyElephant.js"</code><code>></script></code>

<code> </code><code><script type=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>$(function() {</code>

<code> </code><code>$(</code><code>"#download"</code><code>).click(function() {</code>

<code> </code><code>var</code> <code>downloadUrl = [</code><code>'Content/keso1.jpg'</code><code>,</code><code>'Content/keso2.jpg'</code><code>,</code><code>'Content/keso1.txt'</code><code>,</code><code>'Content/keso2.txt'</code><code>,</code><code>'Content/keso1.zip'</code><code>,</code><code>'Content/keso2.zip'</code><code>];</code>

<code> </code><code>$(downloadUrl).multiDownload({</code><code>"source"</code><code>:</code><code>"local"</code><code>});</code>

<code> </code><code><a id=</code><code>'download'</code> <code>href=</code><code>"#"</code><code>>下载</a></code>

<code> </code><code><a href=</code><code>"Content/keso1.zip"</code><code>>zip文件</a></code>

<code> </code><code><Image src=</code><code>"FlyElephant.jpg"</code> <code>/></code>

个人非专业前端，难免有遗漏或不到位的地方，如有不当请多多指正，多谢~　

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4207358.html，如需转载请自行联系原作者

jQuery多文件下载

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条