在前端開發中,有時候我們需要選擇本地文件夾,如果我們只能選擇單個文件,那么選擇起來還比較簡單,但是如果需要選擇整個文件夾,那就需要用到jQuery來實現了。
首先,我們需要在html中添加一個input標簽,用于選擇本地文件夾:
<input type="file" id="folderSelector" webkitdirectory directory multiple />
其中,webkitdirectory
和directory
屬性表示選擇文件夾,multiple
屬性表示可以一次選擇多個文件夾。
接下來,我們通過jQuery來獲取選擇的文件夾路徑:
$(function() { $('#folderSelector').change(function() { var folderPath = $(this).val(); console.log(folderPath); }); });
代碼解釋:
首先,使用$(function() {})
來等待頁面加載完成后執行代碼,這樣可以保證獲取到選擇文件夾的input元素。然后,使用$('#folderSelector')
來獲取選擇文件夾的input元素,并添加一個change事件。當用戶選擇了文件夾后,$(this).val()
會返回選擇的文件夾路徑,我們可以在控制臺中利用console.log()
來輸出路徑。
需要注意的是,選擇文件夾的功能在不同瀏覽器中的實現方式可能會有所不同,因此最好先測試一下在目標瀏覽器中是否能夠正常選擇文件夾。
上一篇jquery選擇器的書寫
下一篇jquery選擇當前父類