Python/Flask - 通过 dropzone 上传后，不等待提交按钮

Question

我正在 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 > he/she 很高兴：单击“提交”按钮 > 然后出现等待屏幕。

问题是：文件被拖放到拖放区后，应用程序不等待提交按钮，而是直接进入下一页。我认为它与 {{ dropzone.create(action='/upload_file') }} 有关，但我不确定...当我删除它时，它不再显示 dropzone...

有人有这方面的经验可以帮助我吗？非常感谢:)

建议后编辑代码：

我现在已经将 autoProcessQueue 添加到 dropzone.config()，但它仍然不会等到我单击按钮..:[=18=]

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

Answer 1

我认为你应该使用以下选项初始化你的 dropzone 以禁用初始处理：

autoProcessQueue: false

Answer 2

需要设置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,') }}

将 upload-btn 替换为您的提交按钮的 ID 以使其生效。

Python/Flask - 通过 dropzone 上传后，不等待提交按钮

Python/Flask - after upload via dropzone, is does not wait for submit button

javascript

python

flask

dropzone