带有Flask for Uploads的HTML中的文件夹选择器 [英] Folder picker in HTML with Flask for Uploads
问题描述
我正在运行Flask应用程序,用户在该应用程序上载文件,并且必须选择在网络驱动器上将文件上载位置的根文件夹路径.此路径是IIS可用的网络路径,也是所有用户计算机上的网络驱动器.
I am running a Flask app where the user uploads a file and must select the root folder path of where to upload the file on a network drive. This path is an IIS available network path and is also a network drive on all user's computers.
我想动态显示HTML中的可用文件夹,即使在应用启动后创建新文件夹也是如此.
I want to dynamically show the available folders in HTML, even if new folders are created after the app starts.
由于安全性,我知道用纯HTML不能做到这一点,但我想知道Flask是否有解决方法.目标是使用Python将上传文件移动到所选的文件夹路径.
I know this can't be done with pure HTML due to security but wanted to know if there was a way around this with Flask. The goal is to use Python to move the upload file to the choosen folder path.
我尝试过:
<form><input type="file" name=dir webkitdirectory directory multiple/></form>
但这仅适用于Chrome.通过用户选择的路径,我可以将此路径传递到Python上,以将上传文件复制到此处.
But this only works in Chrome. With the path choosen by the user I can pass this onto Python to copy the upload file to there.
推荐答案
由于现代浏览器的限制,我决定使用JSTree作为解决方案.而且效果很好.它具有树状结构浏览器.结构是将文件夹输出为JSON的结果.您还可以添加搜索栏,以便用户只需键入要搜索的文件夹名称即可.
请参阅 JSTree https://www.jstree.com/
Due to modern browser limitations I decided to use JSTree as a solution. And it is working very well. It features a tree structure browser. The structure is the result of outputting the folders as JSON. You can add a search bar as well so the user can just type in a folder name to search.
Please see JSTree https://www.jstree.com/
如何通过Flask实施此操作
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文件夹".当用户单击文件夹时,这将返回WTForms的路径.
In Flask/WTForms call on the id "folderout". This will return the path to WTForms when the user clicks the folder.
folderout = TextField('Folder:', validators=[validators.required()])
使用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)
这篇关于带有Flask for Uploads的HTML中的文件夹选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!