HTML中的文件夹选择器，用于上载

Question

我正在运行一个Flask应用程序，用户可以上传一个文件，并且必须选择网络驱动器上上传文件的根文件夹路径。此路径是IIS可用的网络路径，也是所有用户计算机上的网络驱动器。在

我想用HTML动态显示可用文件夹，即使在应用程序启动后创建了新文件夹。在

我知道由于安全原因，纯HTML无法做到这一点，但我想知道是否有办法用Flask解决这个问题。目标是使用Python将上载文件移动到choosen文件夹路径。在

我试过：

<form><input type="file" name=dir webkitdirectory directory multiple/></form>

但这只适用于Chrome。通过用户选择的路径，我可以将这个传递到Python上，将上载文件复制到那里。在

Answer 1

Python运行在您的服务器上，因此无法使用它来移动客户端上的文件。如果您仔细考虑一下，假设您设法（神奇地）向客户机发送python命令来移动文件，您知道他们是否安装了python来解释您的命令？在

另一方面，Javascript在客户端运行，并被用来实现这一点。然而，正如你所说，由于安全原因，现代浏览器不允许这样做。如果他们允许，那么任何网站都可能看到你的整个文件系统。在

这里有一个article解释了一点原因。查找它的文件上传控制部分。希望这能让事情更清楚一点。在

编辑：在看到您的评论后，您可以使用手术室步行. 小心，它可能很慢。在

for root, dirs, files in os.walk(rootPath): # for example "C:/Users/"
    for file in files:
        if file == (wantedFile):
            print(os.path.join(root,file))
            break

Answer 2

由于现代浏览器的局限性，我决定使用JSTree作为解决方案。而且效果很好。它具有树状结构浏览器。该结构是将文件夹作为JSON输出的结果。您还可以添加搜索栏，以便用户只需键入要搜索的文件夹名。
请参见JSTree https://www.jstree.com/

如何用烧瓶实现这一点

HTML/JS:

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
  <div>
  <input class="search-input form-control" placeholder="Search for folder"></input>
  </div>
<script id="jstree1" name="jstree1">
                        /*Search and JS Folder Tree*/
                        $(function () {
                            $(".search-input").keyup(function () {
                                var searchString = $(this).val();
                                console.log(searchString);
                                $('#container').jstree('search', searchString);
                            });
                            $('#container').jstree({
                                'core': {
                                    "themes": {
                                        "name": "default"
                                        , "dots": true
                                        , "icons": true
                                    }
                                    , 'data': {
                                        'url': "static/JSONData.json"
                                        , 'type': 'GET'
                                        , 'dataType': 'JSON'
                                    }
                                }
                                , "search": {
                                    "case_insensitive": true
                                    , "show_only_matches": true
                                }
                                , "plugins": ["search"]
                            });
                        });

                        { /*   - THIS IS FOLDER SELECTOR FOR ID "folderout"  - */
                            $("#container").on("select_node.jstree", function (evt, data) {
                                var number = data.node.text

                                document.getElementById("folderout").value = number;
                            });

在Flask/WTForms中调用id“folderout”。这将在用户单击文件夹时返回WTForms的路径。在

^{pr2}$

使用Python创建JSON JStree文件：

import os

# path   : string to relative or absolute path to be queried
# subdirs: tuple or list containing all names of subfolders that need to be
#          present in the directory
def all_dirs_with_subdirs(path, subdirs):
    # make sure no relative paths are returned, can be omitted
    path = os.path.abspath(path)

    result = []
    for root, dirs, files in os.walk(path):
        if all(subdir in dirs for subdir in subdirs):
                result.append(root)
    return result

def get_directory_listing(path):
    output = {}
    output["text"] = path.decode('latin1')
    output["type"] = "directory"
    output["children"] = all_dirs_with_subdirs(path, ('Maps', 'Reports'))
    return output

with open('test.json', 'w+') as f:
    listing = get_directory_listing(".")
    json.dump(listing, f)