如何解决Python / Flask-通过dropzone上传后，无需等待提交按钮
我正在用Python创建Flask应用程序，并且在以下方面遇到了困难：
我有2页：
upload.html->首先上传文件，如果用户满意，可以单击“提交”，然后出现等待屏幕
{% block header %}
<head>
<!-- standard stuff -->
<link rel="shortcut icon" href="{{ url_for('static',filename='favicon.png') }}">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css"> -->
</head>
<div class="header-with-image" style="width: 100%; background-color:white; height: 70px; color: white;padding:0px;">
<img class='banner-image' src="{{ url_for('static',filename='images/logo_header.jpg') }}" style="display: block;
margin-left: auto;
margin-right: auto;
width: 8%;
margin-bottom:<y>px;">
</div>
<div class="row justify-content-center align-items-center">
<h1>Title Tool</h1>
</div>
<div class='row head valign-wrapper' >
<div class='col s8 rellax center-align' data-rellax-speed="-2">
<br>
<br>
</div>
</div>
{% endblock %}
{% block content %}
<div >
<h4 > Upload here </h4>
<br>
<!-- <form action="/upload-file" method="POST" enctype="multipart/form-data" type="post">-->
<head>
<meta charset="UTF-8">
<title>Flask-Dropzone Demo</title>
{{ dropzone.load_css() }}
{{ dropzone.style() }}
</head>
<body>
{{ dropzone.create(action='/upload_file') }}
{{ dropzone.load_js() }}
{{ dropzone.config() }}
</body>
<!-- </form>-->
<form action="/waiting_screen" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input type = "submit" value = "Go" >
</div>
</form>
</div>
{% endblock %}
waiting_screen.html->当然，这是一个带有小的等待动画的页面
{% block header %}
<head>
<!-- standard stuff -->
<link rel="shortcut icon" href="{{ url_for('static',filename='favicon.png') }}">
<style>
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css"> -->
</head>
<div class="header-with-image" style="width: 100%; background-color:white; height: 70px; color: white;padding:0px;">
<img class='banner-image' src="{{ url_for('static',filename='images/logo_header.jpg') }}" style="display: block;
margin-left: auto;
margin-right: auto;
width: 8%;
margin-bottom:<y>px;">
</div>
<div class="row justify-content-center align-items-center" style="width: 100%;
box-shadow: 0 4px 2px -2px rgba(0,.2);
height:100px;
background-color:#2c3350;
margin-top:<x>px;
text-align: center;">
<h1>Consolidatie Tool</h1>
</div>
<div class='row head valign-wrapper' >
<div class='col s8 rellax center-align' data-rellax-speed="-2">
<br>
<br>
</div>
</div>
{% endblock %}
{% block content %}
<div action="/first-page-info-check" method="POST">
<h4 style="text-align:center"> Bezig om documenten te verwerken... </h4>
<br>
<head>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom" action="/first-page-info-check">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div >
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage,3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</head>
</div>
{% endblock %}
我的python代码是：
filename = None
def allowed_file(filename):
if not "." in filename:
return False
ext = filename.rsplit(".",1)[1]
if ext.upper() in app.config["ALLOWED_FILE_EXTENSIONS"]:
return True
else:
return False
@app.route("/upload-file",methods=["POST"])
def upload_file():
global filename
file = None
if request.method == "POST":
if request.files:
file = request.files["file"]
print("test2")
if file.filename == "":
print("No filename")
return redirect("upload.html")
if allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOADED_PATH'],filename))
print("file uploaded")
return redirect("upload.html")
else:
print("That file extension is not allowed")
return redirect("upload.html")
else:
print("test3")
return render_template("upload.html")
@app.route('/waiting_screen',methods=['POST'])
def waiting_screen():
global filename
return render_template("waiting_screen.html",file_name=filename)
所以我希望发生以下情况：
用户将文件放在放置区中>是他/她感到高兴：单击“提交”按钮>，然后出现等待屏幕。
问题是：将文件拖放到放置区后，应用程序不会等待提交按钮，而是直接进入下一页。我认为它与{{ dropzone.create(action='/upload_file') }}有关，但是我不确定...当我删除它时，它不再显示dropzone ...
有人对此有经验可以帮助我吗？非常感谢：）
建议后编辑代码：
我现在已经将autoProcessQueue添加到dropzone.config（）中，但是它仍然等到我单击按钮后才开始。：
<div style="padding: 2%;font-family: Verdana; margin:15px; text-align: center;margin-left: auto;height: 40%;
margin-right: auto;background: #ffffff;border-radius:4px;border-color:red;
box-shadow: 0 8px 16px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,0.19);width:30%;" >
<h4 style="text-align:center"> Upload hier je documenten voor de vergunning <br><br> die je wil consolideren </h4>
<br>
<head>
<meta charset="UTF-8">
{{ dropzone.load_css() }}
{{ dropzone.style('border: 2px dashed #4e70ab; margin: 2%; min-height: 100px;') }}
{{ dropzone.create(action='upload_file') }}
{{ dropzone.load_js() }}
{{ dropzone.config(custom_init='dz = this;document.getElementById("upload-btn").addEventListener("click",function handler(e) {dz.processQueue();});',custom_options='autoProcessQueue: false,addRemoveLinks: true,parallelUploads: 20,') }}
</head>
<form action="/waiting_screen" method="POST" enctype="multipart/form-data">
<div class="form-group">
<input style="font-family: Verdana; margin:15px; color:white; border:none;
border-radius:4px; font-size: 16px; padding:20px; background:#FFFFFF;
background-color: #4e70ab; cursor:pointer" id="upload-btn" type = "submit" value = "bevestig" >
</div>
</form>
</div>
解决方法
您需要设置Dropzone.js's autoProcessingQueue config parameter to false并在用户单击“提交”按钮时手动调用processQueue()。
您可以使用Flask-Dropzone's Custom Configuration String功能来做到这一点。
文档中提到了您的确切用例：您需要在模板中调用dropzone.config
{{ dropzone.config(custom_init='dz = this;document.getElementById("upload-btn").addEventListener("click",function handler(e) {dz.processQueue();});',custom_options='autoProcessQueue: false,addRemoveLinks: true,parallelUploads: 20,') }}
用提交按钮的ID替换upload-btn，使其生效。
我认为您应该使用以下选项初始化您的dropzone以禁用初始处理：
autoProcessQueue：错误
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
