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多任務上傳添加進度條