【发布时间】：2020-09-24 11:10:25
【问题描述】：
我正在用 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,0,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 > 他/她是否满意：单击“提交”按钮 > 然后出现等待屏幕。
问题是：文件被拖放到 dropzone 后，应用程序不会等待提交按钮，而是直接进入下一页。我认为它与{{ 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,0,0.2), 0 6px 20px 0 rgba(0,0,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>
【问题讨论】：
标签： javascript python flask dropzone