使用dropzone上传文件后如何在不刷新页面的情况下动态向html表添加行？答案

【问题标题】：How to dynamically add rows to html table after uploading files using dropzone without refreshing page?使用dropzone上传文件后如何在不刷新页面的情况下动态向html表添加行？
【发布时间】：2019-02-13 14:17:37
【问题描述】：

我是烧瓶和 dropzone 的新手。

我使用dropzone 创建了一个flask 应用程序，以允许用户删除文件。我正在从删除的文件中提取文本，提取的文本将转到我的 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 的子代，并尝试动态添加行。

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

【问题讨论】：

嘿 Nilesh，你有没有想过这个问题？有兴趣用我正在制作的应用做同样的事情！

标签： python flask dropzone

【解决方案1】：

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

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

【讨论】：