Question

我是不熟悉Flask和Dropzone的人。

我已经使用flask创建了一个dropzone应用程序，以允许用户删除文件。我正在从拖放的文件中提取文本，提取的文本将转到我的 Azure ML Web服务中进行文档分类。此Web服务将返回Prediction result和Scored probabilities，我想在HTML表中向用户显示。

在这里，用户将拥有一个包含drop interface和空白html table的网页。用户将删除一个文件，结果将显示为表格行。我不想重定向到新页面，因为用户可能会上传多个文件（例如100个文件），并且只会处理很少的文件（例如并行处理5个文件）。因此，每个请求的结果应该是一个表行，并且每行都应追加到表中。

下面是我的文件：

flask-interface.py

from flask import Flask, render_template, request, redirect
from flask_dropzone import Dropzone
from flask_uploads import UploadSet, configure_uploads, patch_request_class, ALL

url = 'azure url'
api_key = 'api key'
headers = {'Content-Type':'application/json', 'Authorization':('Bearer '+ api_key)}

app = Flask(__name__)
dropzone = Dropzone(app)

# Dropzone settings
app.config['DROPZONE_UPLOAD_MULTIPLE'] = True
app.config['DROPZONE_PARALLEL_UPLOADS'] = 5
app.config['TEMPLATES_AUTO_RELOAD'] = True

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        for key, f in request.files.items():
            // save files

        // Calling Azure Web Service

        // Reading response
        return render_template('result.html', result=response)
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

index.html

<!DOCTYPE html>
<html>
    <head>
    <title>Flask Interface</title>
        {{ dropzone.load() }}
        {{ dropzone.style('border: 2px dashed #0087F7; margin: 10%; min-height: 200px;') }}
    </head>
    <body>
        <h2>Please Drag and Drop file(s) to test ML Studio web service.</h2>
        {{ dropzone.create(action_view='index') }}
        <div id="content">
            <table>
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th>Prediction Result</th>
                        <th>Score Probability</th>
                    </tr>
                </thead>            
                <tbody>
                {% block content %}{% endblock %}
                </tbody>
            </table>
        </div>
    </body>
</html>

result.html

{% extends "index.html" %}
{% block content %}
    {% for dict in result %}
        <tr>
            <td></td>
            <td>{{ dict['Scored Labels'] }}</td>
            <td>{{ dict['Scored Probabilities'] }}</td>
        </tr>
    {% endfor %}
{% endblock %}

result.html是index.html的子级，并试图动态添加行。

如何在不刷新页面的情况下将响应添加为现有表中的行？

Answer 1

您可以返回包含该信息的return render_template('result.html', result=response)，而不是执行Response。我对dropzone并不是很熟悉，但是我假设它可以在烧瓶服务器返回响应时为其添加一些JavaScript回调函数。

行中的内容

dropzone.onResponse((response) => {
  const rows = convertResponseToRows();
  const table = document.getElementById('the-table');
  rows.forEach((row) => addRowToTable(table, row));
});

在使用dropzone上传文件而不刷新页面后，如何在html表中动态添加行？

1 个答案: