HTML5+原生JS實現服務器端目錄樹中多文件下載

李增田發布于2019-08-21 16:48 / 2397人閱讀

摘要：由于本例實現的將一個目錄樹下所有文件都平行下載到本地的同一個文件夾下。

HTML5+原生JS實現服務器端目錄樹中多文件下載

作者：云荒杯傾
作者博客

需求

需求是這樣的，服務器上有一個目錄，目錄下面可能既有文件又有其他目錄，其他目錄下面也一樣，既可能有文件也有目錄；瀏覽器要顯示有這個目錄，并提供這個目錄下所有文件的一鍵下載功能。

實現原理

實現這個需求，本程序考慮到的知識點有html5 標簽的下載功能、數據結構中樹的廣度優先遍歷算法、一點http知識和一點JS局限性的知識。

HTML5 標簽的下載功能

首先說HTML5 標簽的下載功能，
HTML5的標簽有一個download屬性，如果你設置了這個屬性，那么點擊這個鏈接，就不再是跳轉到這個標簽href引用的地址了，而是直接去下載href所代表的一個文件。

即

這是超鏈接

這樣，點擊這是超鏈接幾個字，只能頁面跳轉到bbb.html。
而，

這是超鏈接

這樣，加了download屬性后，你再點擊這是超鏈接幾個字，就直接下載bbb.html到你的本地機器（客戶端）了，且文件會改名為“ccc.html”。如果只寫download，則是保持原始文件名下載。

一點http知識

http是不提供目錄遍歷的，所以暫時不知道其他實現方法是否碰到了這個點，所以導致程序失敗。某種程度上，本文的程序算是避開了這個點？

一點JS局限性的知識

JS語言跑在瀏覽器的話，是不能操作本地（客戶端）太多東西的，其中就包括一些文件操作，而文件夾創建操作就包括在這些限制操作之內。這也是無法實現將服務器上的一個目錄按照其目錄結構原樣拷貝到本地（客戶端）的原因。

看過一篇博文的舉例很好，他說，如果我有一個網站，你是訪客，你訪問，點擊了某個鏈接，我就把網站的一個目錄樹（假設有一百萬個txt），拷貝到你的本地，你會不會惱火？而且，之所以瀏覽器不提供這些功能，主要是出于客戶端安全方面的考慮。

做這個需求的時候，看到IE上有一個activexObject對象，可以在本地創建文件夾。但是想想就只有IE支持，還是算了。

綜上，本程序是將服務器上一個有層次的目錄樹里面所有的文件，通過瀏覽器下載到本地同一個文件夾下的。

不過因為下載一個目錄樹的功能，最主要的考察點還是樹狀數據結構的遍歷，如果哪天瀏覽器都實現了本地創建文件夾，本程序的代碼仍有參考價值。

目錄樹的廣度優先遍歷及本程序的實現思路

本例的思路是，前后端定義一個目錄樹的接口。

前端通過xhr拿到數據。

一層一層遍歷這顆目錄樹，直到遍歷完這個目錄樹下所有文件，也就能拿到這所有文件的URL了。假設一共有n個文件，也就是n個URL。

拿到n個URL后，注冊這個目錄對應的下載該目錄下所有文件按鈕的監聽器，監聽器內創建n個html5 標簽，標簽的href分別賦值url路徑，所有標簽設置download屬性。

如此，就實現了加載HTML，HTML上有一個代表著服務器上一個目錄的目錄名，目錄名后面有一個下載該目錄下所有文件的按鈕，點擊該按鈕，就從服務器下載了該目錄下所有文件到本地。

本文定義的目錄樹結構

目錄樹接口定義如下，一個目錄要有name(也就是URL)，file是該層目錄下裸露的文件，childDir是該層有的下一層的目錄，如此往復。。。如果到了某一目錄，既沒有文件有沒有目錄，那么name就定義為[]數組，childDir也定義為[]數組。

本例中的目錄樹是：根目錄./chrome61module，其下有三個文件，分別是aa.css,aa.js,module-test.html，還有一個目錄bb；bb目錄下只有兩個文件bb.js和bb.html。

//假設這是從服務器取來的a鏈接的目錄結構
        var rootDir = {
            "name":"./chrome61module",
            "file":["/aa.css","/aa.js","/module-test.html"],
            "childDir":[{
                "name":"./chrome61module/bb",
                "file":["/bb.js","/bb.html"],
                "childDir":[]
            },{}]
        };

效果展示

圖1 HTML頁面

圖2 點擊下載該目錄下所有文件Chrome會提示你是否要下載多個文件

圖3 本例中下載成功的五個文件

代碼展示

代碼比較簡單，就直接放了，大家直接自己粘貼了，就能運行，注意修改目錄樹結構為你自己的。


    chrome61module目錄

總結

1、由于http和JS能力的限制，目前僅能實現文件下載，不能實現文件夾下載或者文件夾本地創建，因此想原樣拷貝服務器上一個目錄到本地機器，使用JS目前較難做到。

2、由于本例實現的將一個目錄樹下所有文件都平行下載到本地的同一個文件夾下。造成客戶端即使下載了也無法理解服務器上原目錄樹的困難。
一點改進是，如果使用download=“”，將“”內的文件名改為包含路徑的文件名，也許下載以后，客戶端可以獲悉其原來在服務器上的對應的目錄層級，從而可以自己后續處理。

3、如果可能，還是按照壓縮包的形式下載一個目錄也許更好。

云服務器 GPU云服務器樹中多原生js實現 ajax原生js實現原生js實現addclass

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88757.html

HTML5+原生JS實現服務器端目錄樹中多文件下載

摘要：由于本例實現的將一個目錄樹下所有文件都平行下載到本地的同一個文件夾下。 HTML5+原生JS實現服務器端目錄樹中多文件下載作者：云荒杯傾作者博客需求需求是這樣的，服務器上有一個目錄，目錄下面可能既有文件又有其他目錄，其他目錄下面也一樣，既可能有文件也有目錄；瀏覽器要顯示有這個目錄，并提供這個目錄下所有文件的一鍵下載功能。實現原理實現這個需求，本程序考慮到的知識點有html5 ...

tuantuan 2019-08-01 17:41 評論0 收藏0
前端面試題-瀏覽器/服務端/網絡

摘要：同源策略是什么跨域通信同源兩個文檔同源需滿足協議相同域名相同端口相同跨域通信進行操作通信時如果目標與當前窗口不滿足同源條件，瀏覽器為了安全會阻止跨域操作。同源策略是什么？ javascript跨域通信同源：兩個文檔同源需滿足協議相同域名相同端口相同跨域通信：js進行DOM操作、通信時如果目標與當前窗口不滿足同源條件，瀏覽器為了安全會阻止跨域操作。跨域通信通常有以下方法 ...

jsdt 2019-08-23 15:35 評論0 收藏0
指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我們需要在后端進行額外配置。模式的配置方法我們來看看官方文檔是教我們怎么配置的模式。模式的配置實踐及原理強烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設置為，但不配置后端。始發于我的博客 ryougifujino.com，歡迎訪問留言。 vue-router分為hash和history模式，前者為其默認模式，url的表現形式為...

Richard_Gao 2019-08-30 11:04 評論0 收藏0