成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML5+原生JS實(shí)現(xiàn)服務(wù)器端目錄樹(shù)中多文件下載

tuantuan / 3673人閱讀

摘要：由于本例實(shí)現(xiàn)的將一個(gè)目錄樹(shù)下所有文件都平行下載到本地的同一個(gè)文件夾下。

HTML5+原生JS實(shí)現(xiàn)服務(wù)器端目錄樹(shù)中多文件下載

作者：云荒杯傾
作者博客

需求

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

實(shí)現(xiàn)原理

實(shí)現(xiàn)這個(gè)需求，本程序考慮到的知識(shí)點(diǎn)有html5 標(biāo)簽的下載功能、數(shù)據(jù)結(jié)構(gòu)中樹(shù)的廣度優(yōu)先遍歷算法、一點(diǎn)http知識(shí)和一點(diǎn)JS局限性的知識(shí)。

HTML5 標(biāo)簽的下載功能

首先說(shuō)HTML5 標(biāo)簽的下載功能，
HTML5的標(biāo)簽有一個(gè)download屬性，如果你設(shè)置了這個(gè)屬性，那么點(diǎn)擊這個(gè)鏈接，就不再是跳轉(zhuǎn)到這個(gè)標(biāo)簽href引用的地址了，而是直接去下載href所代表的一個(gè)文件。

即

這是超鏈接

這樣，點(diǎn)擊這是超鏈接幾個(gè)字，只能頁(yè)面跳轉(zhuǎn)到bbb.html。
而，

這是超鏈接

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

一點(diǎn)http知識(shí)

http是不提供目錄遍歷的，所以暫時(shí)不知道其他實(shí)現(xiàn)方法是否碰到了這個(gè)點(diǎn)，所以導(dǎo)致程序失敗。某種程度上，本文的程序算是避開(kāi)了這個(gè)點(diǎn)？

一點(diǎn)JS局限性的知識(shí)

JS語(yǔ)言跑在瀏覽器的話，是不能操作本地（客戶端）太多東西的，其中就包括一些文件操作，而文件夾創(chuàng)建操作就包括在這些限制操作之內(nèi)。這也是無(wú)法實(shí)現(xiàn)將服務(wù)器上的一個(gè)目錄按照其目錄結(jié)構(gòu)原樣拷貝到本地（客戶端）的原因。

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

做這個(gè)需求的時(shí)候，看到IE上有一個(gè)activexObject對(duì)象，可以在本地創(chuàng)建文件夾。但是想想就只有IE支持，還是算了。

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

不過(guò)因?yàn)?strong>下載一個(gè)目錄樹(shù)的功能，最主要的考察點(diǎn)還是樹(shù)狀數(shù)據(jù)結(jié)構(gòu)的遍歷，如果哪天瀏覽器都實(shí)現(xiàn)了本地創(chuàng)建文件夾，本程序的代碼仍有參考價(jià)值。

目錄樹(shù)的廣度優(yōu)先遍歷及本程序的實(shí)現(xiàn)思路

本例的思路是，前后端定義一個(gè)目錄樹(shù)的接口。

前端通過(guò)xhr拿到數(shù)據(jù)。

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

拿到n個(gè)URL后，注冊(cè)這個(gè)目錄對(duì)應(yīng)的下載該目錄下所有文件按鈕的監(jiān)聽(tīng)器，監(jiān)聽(tīng)器內(nèi)創(chuàng)建n個(gè)html5 標(biāo)簽，標(biāo)簽的href分別賦值url路徑，所有標(biāo)簽設(shè)置download屬性。

如此，就實(shí)現(xiàn)了加載HTML，HTML上有一個(gè)代表著服務(wù)器上一個(gè)目錄的目錄名，目錄名后面有一個(gè)下載該目錄下所有文件的按鈕，點(diǎn)擊該按鈕，就從服務(wù)器下載了該目錄下所有文件到本地。

本文定義的目錄樹(shù)結(jié)構(gòu)

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

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

//假設(shè)這是從服務(wù)器取來(lái)的a鏈接的目錄結(jié)構(gòu)
        var rootDir = {
            "name":"./chrome61module",
            "file":["/aa.css","/aa.js","/module-test.html"],
            "childDir":[{
                "name":"./chrome61module/bb",
                "file":["/bb.js","/bb.html"],
                "childDir":[]
            },{}]
        };
效果展示


圖1 HTML頁(yè)面


圖2 點(diǎn)擊下載該目錄下所有文件Chrome會(huì)提示你是否要下載多個(gè)文件


圖3 本例中下載成功的五個(gè)文件

代碼展示

代碼比較簡(jiǎn)單，就直接放了，大家直接自己粘貼了，就能運(yùn)行，注意修改目錄樹(shù)結(jié)構(gòu)為你自己的。


    chrome61module目錄
總結(jié)

1、由于http和JS能力的限制，目前僅能實(shí)現(xiàn)文件下載，不能實(shí)現(xiàn)文件夾下載或者文件夾本地創(chuàng)建，因此想原樣拷貝服務(wù)器上一個(gè)目錄到本地機(jī)器，使用JS目前較難做到。

2、由于本例實(shí)現(xiàn)的將一個(gè)目錄樹(shù)下所有文件都平行下載到本地的同一個(gè)文件夾下。造成客戶端即使下載了也無(wú)法理解服務(wù)器上原目錄樹(shù)的困難。
一點(diǎn)改進(jìn)是，如果使用download=“”，將“”內(nèi)的文件名改為包含路徑的文件名，也許下載以后，客戶端可以獲悉其原來(lái)在服務(wù)器上的對(duì)應(yīng)的目錄層級(jí)，從而可以自己后續(xù)處理。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51311.html

相關(guān)文章

  • HTML5+原生JS實(shí)現(xiàn)服務(wù)器端目錄樹(shù)中多文件下載

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

    李增田 評(píng)論0 收藏0

  • 前端面試題-瀏覽器/服務(wù)端/網(wǎng)絡(luò)

    摘要：同源策略是什么跨域通信同源兩個(gè)文檔同源需滿足協(xié)議相同域名相同端口相同跨域通信進(jìn)行操作通信時(shí)如果目標(biāo)與當(dāng)前窗口不滿足同源條件，瀏覽器為了安全會(huì)阻止跨域操作。 同源策略是什么？ javascript跨域通信 同源：兩個(gè)文檔同源需滿足 協(xié)議相同 域名相同 端口相同 跨域通信：js進(jìn)行DOM操作、通信時(shí)如果目標(biāo)與當(dāng)前窗口不滿足同源條件，瀏覽器為了安全會(huì)阻止跨域操作?？缬蛲ㄐ磐ǔＳ幸韵路椒?...

    jsdt 評(píng)論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來(lái)看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒(méi)有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評(píng)論0 收藏0

  • Vue Router history模式的配置方法及其原理

    摘要：但如果要使用模式，我們需要在后端進(jìn)行額外配置。模式的配置方法我們來(lái)看看官方文檔是教我們?cè)趺磁渲玫哪Ｊ?。模式的配置?shí)踐及原理強(qiáng)烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設(shè)置為，但不配置后端。 始發(fā)于我的博客 ryougifujino.com，歡迎訪問(wèn)留言。 vue-router分為hash和history模式，前者為其默認(rèn)模式，url的表現(xiàn)形式為...

    Richard_Gao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<