只有chrome支持,我刚才写了点代码测试了一下
前端部分,主要是需要加一个这个只有chrome支持的input属性 webkitdirectory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function () {
$("#files").on("change",function (e) {
$.each(this.files,function (k,v) {
console.log(v.type+"="+v.webkitRelativePath);
});
});
})
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="/index/upload_folder">
<input type="file" id="files" name="files[]" webkitdirectory mozdirectory>
<input type="submit" value="确认上传文件夹">
</form>
</body>
</html>
chrome选择文件夹截图
选择完毕效果截图,相当于chrome把里面的文件遍历了一遍,这里有4个文件的原因是macosx文件夹下都会有一个.DS_Store隐藏文件
后端部分用PHP接收了一下,基本和多个file一起提交的效果是一样的
$_FILES直接能拿到,所以我打印了一下$_FILES变量,其他语言的后端应该也是一样的
获取目录结构办法
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function () {
$("#files").on("change",function (e) {
$.each(this.files,function (k,v) {
console.log(v.type+"="+v.webkitRelativePath);
});
});
})
</script>