html5 實現 文件夾上傳


先插個背景:最近所在項目有個小需求,就是上傳文件要可以同時選擇文件夾及文件,然后把文件夾內得文件及所選單文件全部選擇上傳,借助於搜索關鍵詞沒搜到想要的結果(相關文章貌似很好,要么就是遍歷文件夾內的文件之類的。。。),遂研究百度網盤文件上傳功能。。。。。

發現百度網盤有個上就在input type=file 的標簽上加個一個屬性“webkitdirectory”,加上次屬性即可選擇整個文件夾。

 

 

查詢屬性“webkitdirectory”發現這並不是一個標准支持的屬性,經測試,目前僅支持chrome瀏覽器,IE11/MOZ均不支持  safari暫未測試,謹慎使用。

MDN:關於次屬性說明:

* Non-standard
* This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between * * * *implementations and the behavior may change in the future.

The HTMLInputElement.webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the <input> element should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. The selected file system entries can be obtained using the webkitEntries property.

 

對於目前要上傳文件夾原生暫未完全支持,要尋求兼容各瀏覽器文件夾上傳恐怕要多費寫功夫。如有相關已經實現切體驗良好的上傳文件夾功能可以使用,請推薦,謝謝!

可以參考百度網盤網頁版做法:支持此屬性則顯示上傳文件夾選項,如果不支持次屬性不顯示上傳文件夾選項


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM