先插個背景:最近所在項目有個小需求,就是上傳文件要可以同時選擇文件夾及文件,然后把文件夾內得文件及所選單文件全部選擇上傳,借助於搜索關鍵詞沒搜到想要的結果(相關文章貌似很好,要么就是遍歷文件夾內的文件之類的。。。),遂研究百度網盤文件上傳功能。。。。。
發現百度網盤有個上就在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.
對於目前要上傳文件夾原生暫未完全支持,要尋求兼容各瀏覽器文件夾上傳恐怕要多費寫功夫。如有相關已經實現切體驗良好的上傳文件夾功能可以使用,請推薦,謝謝!
可以參考百度網盤網頁版做法:支持此屬性則顯示上傳文件夾選項,如果不支持次屬性不顯示上傳文件夾選項