首頁 > 開發者 > JavaScript
jQuery多檔案下載
檔案下載是一個Web中非常常用的功能，不過你是做內部管理系統還是做面向公眾的互連網公司都會遇到這個問題，對於下載一般有點實際開發經驗的都會自己解決，上周弄了一下多檔案下載，業務情境就是一條資料詳細資料一個附件原來只需要一個pdf就行，現在要求添加兩張圖片，一次性的下載出來，之前沒遇到這種問題。網上找了找，有了思路，就是需要隱藏一個iframe，然後設定src，大概的原理是這樣的，之後自己開始動手擼代碼去了: 業務情境來源於公司的一個客戶管理系統，為了以後其他地方也能調用，擴充了一下方法: (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的內容，以上的程式調用很簡單,這個數組的裡面的地址放的是伺服器請求的地址，需要保證一點的就是伺服器的原來這個地址是可以下載檔案的： var downloadUrl=['伺服器請求地址1','伺服器請求地址2']; $(downloadUrl).multiDownload(); 當時完成這個功能很順利，然後前天我想寫篇部落格記錄一下，但我比較懶，懶的寫服務端代碼，直接把檔案放在本地，去請求一下，企圖獲得同樣的結果，失敗了，先來看行代碼: <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來日方長： <a download="keso.jpg" href="keso.jpg">Html5下載</a> 這個時候就可以動手該原來的代碼,如果點擊的時候直接這個方法是可以自動下載檔案的,單檔案下載之後就可以進行多檔案下載啦: function downloadHtml5(url){ var aLink = document.createElement('a'); , evt = document.createEvent("HTMLEvents"); evt.initEvent("click"); aLink.download =""; aLink.href =url; aLink.dispatchEvent(evt);} 修改擴充方法: (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); 最終代碼調用，六個檔案都可以下載: <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>個人非專業前端，難免有遺漏或不到位的地方，如有不當請多多指正，多謝~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
