上传文件夹

只有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>

猜你喜欢

转载自blog.csdn.net/wangyingjie290107/article/details/79906134