jQuery多文件
jQuery多文件下载
文件下载是一个Web中非常常用的功能,不过你是做内部管理系统还是做面向公众的互联网公司都会遇到这个问题,对于下载一般有点实际开发经验的都会自己解决,上周弄了一下多文件下载,业务场景就是一条数据详细信息一个附件原来只需要一个pdf就行,现在要求添加两张图片,一次性的下载出来,之前没遇到这种问题。网上找了找,有了思路,就是需要隐藏一个iframe,然后设置src,大概的原理是这样的,之后自己开始动手撸代码去了:
业务场景来源于公司的一个客户管理系统,为了以后其他地方也能调用,扩展了一下方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
(function($) { var methods = { _download: function(options) { var triggerDelay = (options && options.delay) || 100; var removeDelay = (options && options.removeDelay) || 1000; this .each(function(index, item) { methods._createIFrame(item, index * triggerDelay, removeDelay); }); }, _createIFrame: function(url, triggerDelay, removeDelay) { //动态添加iframe,设置src,然后删除 setTimeout(function() { var frame = $( '<iframe style="display: none;" class="multi-download"></iframe>' ); frame.attr( 'src' , url); $(document.body).after(frame); setTimeout(function() { frame.remove(); }, removeDelay); }, triggerDelay); } }; $.fn.multiDownload = function(options) { methods._download.apply( this , arguments); }; })(jQuery); |
上面的代码没什么注释,iframe会加载src的内容,以上的程序调用很简单,这个数组的里面的地址放的是服务器请求的地址,需要保证一点的就是服务器的原来这个地址是可以下载文件的:
1
2
|
var downloadUrl=[ '服务器请求地址1' , '服务器请求地址2' ]; $(downloadUrl).multiDownload(); |
当时完成这个功能很顺利,然后前天我想写篇博客记录一下,但我比较懒,懒的写服务端代码,直接把文件放在本地,去请求一下,企图获得同样的结果,失败了,先来看行代码:
1
|
<a href= "Content/keso1.zip" >zip文件</a> |
这个链接我们点击一下直接下载了zip文件,但是如果你改成xx.jpg,xx.txt,因为浏览器根据 MIME TYPE(资源的媒体类型),如果请求的是后台服务器需要指定一下Content-type,处理本地的文件,没法告诉浏览器某个文件的 MIME Type 的情况下,浏览器也会做一些默认的处理,这和个人的操作系统中给文件配置的 MIME Type 有关。本人电脑是Window,如果需要看具体Content-type,详细地址如下:
所以通常图片和文本有的时候就直接打开显示,而rar,zip文件浏览器不识别Content-type当做文件下载;
为了能直接下载这个图片,找到了Html中有一个download属性,如果你将一个a标签加上一个download属性,jpg文件直接当做文件下载了,href就是图片地址,浏览器兼容没有测试,毕竟5来日方长:
1
|
<a download= "keso.jpg" href= "keso.jpg" >Html5下载</a> |
这个时候就可以动手该原来的代码,如果点击的时候直接这个方法是可以自动下载文件的,单文件下载之后就可以进行多文件下载啦:
1
2
3
4
5
6
7
8
|
function downloadHtml5(url){ var aLink = document.createElement( 'a' ); , evt = document.createEvent( "HTMLEvents" ); evt.initEvent( "click" ); aLink.download = "" ; aLink.href =url; aLink.dispatchEvent(evt); } |
修改扩展方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
(function($) { var methods = { _download: function(options) { var triggerDelay = (options && options.delay) || 100; var removeDelay = (options && options.removeDelay) || 1000; if (options.source === "server" ) { this .each(function(index, item) { methods._createIFrame(item, index * triggerDelay, removeDelay); }); }; if (options.source === "local" ) { this .each(function(index, item) { methods._createLink(item, index * triggerDelay, removeDelay); }); }; }, _createIFrame: function(url, triggerDelay, removeDelay) { //动态添加iframe,设置src,然后删除 setTimeout(function() { var frame = $( '<iframe style="display: none;" class="multi-download"></iframe>' ); frame.attr( 'src' , url); $(document.body).after(frame); setTimeout(function() { frame.remove(); }, removeDelay); }, triggerDelay); }, //download属性设置 _createLink: function(url, triggerDelay, removeDelay) { var aLink = document.createElement( "a" ), evt = document.createEvent( "HTMLEvents" ); evt.initEvent( "click" ); //需要添加属性,不需要设置文件名,个人测试就是原文件名,设为空没有问题,具体情况具体分析 aLink.download = "" ; aLink.href = url; aLink.dispatchEvent(evt); } }; $.fn.multiDownload = function(options) { methods._download.apply( this , arguments); }; })(jQuery); |
最终代码调用,六个文件都可以下载:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>JQuery文件下载</title> <script type= "text/javascript" src= "jquery-1.11.1.js" ></script> <script type= "text/javascript" src= "jquery.multidownload-FlyElephant.js" ></script> <script type= "text/javascript" > $(function() { $( "#download" ).click(function() { var downloadUrl = [ 'Content/keso1.jpg' , 'Content/keso2.jpg' , 'Content/keso1.txt' , 'Content/keso2.txt' , 'Content/keso1.zip' , 'Content/keso2.zip' ]; $(downloadUrl).multiDownload({ "source" : "local" }); }); }); </script> </head> <body> <a id= 'download' href= "#" >下载</a> <a download= "keso.jpg" href= "keso.jpg" >Html5下载</a> <a href= "Content/keso1.zip" >zip文件</a> <div> <Image src= "keso.jpg" /> <Image src= "FlyElephant.jpg" /> </div> </body> </html> |
个人非专业前端,难免有遗漏或不到位的地方,如有不当请多多指正,多谢~
参考资料: 在浏览器端用JS创建和下载文件 AlloyTeam
出处:http://www.cnblogs.com/xiaofeixiang
jQuery多文件的更多相关文章
- ThinkPHP+JQuery实现文件的异步上传
前端代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- 使用jQuery插件时避免重复引入jquery.js文件
当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...
- jquery uploadify文件上传插件用法精析
jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...
- eclipse中jquery.js文件有错误提示…
eclipse中jquery.js文件有错误提示的解决办法 2013-04-06 19:18 浏览次数:382 由于jquery.js文件进行了压缩,压缩之后的语法eclipse无法完全识别,所以有错 ...
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- jQuery uploadify 文件上传
uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
- jquery插件文件上传
文件上传有很多jQuery插件,一般我最为常用的就是uploadify.js和ajaxfileupload.js,二者都是以file标签为依托,前者需要在页面初始化时就渲染插件,比较适合单纯的文件上传 ...
- 关于Eclipse项目中加入jquery.js文件报错(missing semicolon)问题
在使用Eclipse3.7及以后的版本的时候,加入jQuery文件会报错(missing semicolon),文件中会显示红色小X,虽然这个错误并不会影响项目的运行,但是这个却会大大的影响到开发人员 ...
随机推荐
- leetcode第一刷_Spiral Matrix II
跟上一题的策略全然一样,这个题是要求保存当前增加的是第几个数,由于矩阵里面存的就是这个东西. 我有尝试想过是不是有一种方法能够直接推算出每一行的数据是哪些.但没过多久就放弃了.这样的方法尽管能够避免在 ...
- EJB(一)认识ejb
什么是ejb? 相同仍旧在这个系列博客之处,谈谈对ejb的认识和理解. sun微公司对于ejb的定义大体是这种,ejb是一套用于开发和部署分布式组件的的架构.採用ejb的架构应用能够是 ...
- 8、Cocos2dx 3.0三,找一个小游戏开发3.0存储器管理的版本号
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27693365 复杂的内存管理 移动设备上的硬件资源十 ...
- Sonar——代码质量管理平台
Sonar——代码质量管理平台 一.基本认识 Sonar (SonarQube)是一个开源平台,用于管理源代码的质量. Sonar 不只是一个质量数据报告工具,更是代码质量管理平台.通过插件机制,So ...
- AVR文章7课时:动态数字化控制
下面是动态数码管的电路图. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva290ZWlfODhfbHVsdWNfNjY=/font/5a6L5L2T/fo ...
- RDIFramework.NET ━ .NET高速信息系统开发框架钜献 V2.9 版本震撼发布
RDIFramework.NET ━ .NET高速信息化系统开发框架钜献 V2.9 版本号震撼公布 全新体验.全新感觉.2015钜献! 继上个版本号"RDIFramework.NET V2 ...
- 移动端 (基于jquery的3个)touch插件
//第一个 Author: Alone Antroduction: 高级前端开发工程师 Sign: 人生没有失败,只有没到的成功. //依赖jQuery 或者Zepto <script> ...
- JavaScript权威指南科13章 webj浏览器avascript
13.1 clientjavascript window对象是所有clientjavascript特点和api主要的接入点.它代表了一个浏览器窗口,通过window对象引用它. window 方法 a ...
- C++11于once_flag,call_once分析的实现
基于该分析llvm的libc++,代替gun的libstdc++,由于libstdc++的代码里太多宏了,看起来蛋疼. 在多线程编程中,有一个常见的情景是某个任务仅仅须要运行一次.在C++11中提供了 ...
- 7-days-asp-dotnet-mvc-day1
目录 第 1 天 第 2 天 第 3 天 第 4 天 第 5 天 第 6 天 第 7 天 0. 前言 今天是开心的一天.因为我们终于来到了系列学习的最后一节.我相信你喜欢之前的课程,并从中学到了许多. ...