在上传文件的时候,web是运行用户上传文件夹的,但会有浏览器自带的提示
如chrome这样
运行input上传文件夹需要设置 两个重要属性 webkitdirectory multiple
属性multiple: 允许上传多个文件
属性webkitdirectory : 它指示<input>元素应该允许用户选择目录而不是文件。选择目录后，目录及其整个内容层次结构将包含在选定项集中。可以使用WebKitEntries属性获取选定的文件系统条目。
主要设置了webkitdirectory 属性只能选文件夹,不能选文件了
代码如下
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> </style></head><body> <input type="file" webkitdirectory multiple οnchange="selectFile(this)" /><script> function selectFile (even) { console.log(even.files) }</script></body></html>
截图
另一个例子显示选中的文件
<!DOCTYPE html><html><head> <title></title></head><body> <input type="file" id="filepicker" name="fileList" webkitdirectory multiple /><ul id="listing"></ul><script> document.getElementById("filepicker").addEventListener("change", function(event) {let output = document.getElementById("listing");let files = event.target.files;for (let i=0; i<files.length; i++) {let item = document.createElement("li");item.innerHTML = files[i].webkitRelativePath;output.appendChild(item);};}, false);</script></body></html>