Javascript Dropzone.js阻止Flask呈现模板_Javascript_Python_Python 2.7_Flask_Dropzone.js

Javascript Dropzone.js阻止Flask呈现模板

javascript python python-2.7 flask

Javascript Dropzone.js阻止Flask呈现模板,javascript,python,python-2.7,flask,dropzone.js,Javascript,Python,Python 2.7,Flask,Dropzone.js,我正在使用Dropzone.js允许通过Flask网站拖放上传CSV文件。上传过程非常有效。我将上传的文件保存到我指定的文件夹，然后可以使用df.to_html（）将dataframe转换为html代码，然后将其传递到我的模板。它在代码中达到了这一点，但它不会呈现模板，也不会抛出错误。所以我的问题是为什么Dropzone.js会阻止渲染发生我也尝试过只从表中返回HTML代码，而不使用render\u模板，但这也不起作用 init.py import os from flask import F

我正在使用

Dropzone.js

允许通过

Flask

网站拖放上传

CSV

文件。上传过程非常有效。我将上传的文件保存到我指定的文件夹，然后可以使用

df.to_html（）

将

dataframe

转换为

html

代码，然后将其传递到我的模板。它在代码中达到了这一点，但它不会呈现模板，也不会抛出错误。所以我的问题是为什么

Dropzone.js

会阻止渲染发生

我也尝试过只从表中返回

HTML

代码，而不使用

render\u模板

，但这也不起作用

init.py

import os
from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

# get the current folder
APP_ROOT = os.path.dirname(os.path.abspath(__file__))

@app.route('/')
def index():
    return render_template('upload1.html')


@app.route('/upload', methods=['POST'])
def upload():

    # set the target save path
    target = os.path.join(APP_ROOT, 'uploads/')

    # loop over files since we allow multiple files
    for file in request.files.getlist("file"):

        # get the filename
        filename = file.filename

        # combine filename and path
        destination = "/".join([target, filename])

        # save the file
        file.save(destination)

        #upload the file
        df = pd.read_csv(destination)
        table += df.to_html()

    return render_template('complete.html', table=table)


if __name__ == '__main__':
    app.run(port=4555, debug=True)

upload1.html

<!DOCTYPE html>

<meta charset="utf-8">

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">


<table width="500">
    <tr>
        <td>
            <form action="{{ url_for('upload') }}", method="POST" class="dropzone"></form>
        </td>
    </tr>
</table>

Complete.html

<html>

<body>

{{table | safe }}

</body>
</html>


{{表|安全}}

您的代码确实有效。将呈现并返回您的模板
Dropzone将“在后台”将您拖放的文件上载到浏览器中。它将使用来自服务器的响应，并使页面保持原样。它使用来自服务器的响应来了解上载是否成功
要看到这一点，请执行以下操作：

导航到您的页面

打开你最喜欢的浏览器开发工具；（在firefox中按CTRL+SHIFT+K）

选择网络选项卡

将您的csv拖到dropzone窗格中，请注意，请求显示在dev tools网络表中

这是我的浏览器的屏幕截图。我从你的问题中复制了你的代码

要实际查看呈现的
complete.html
，您需要添加另一个flask端点，并找到导航到该端点的方法
例如：在
upload1.html
中添加：

<a href="{{ url_for('upload_complete') }}">Click here when you have finished uploading</a>

更新：现在您可以使用一个Flask扩展，它集成了Dropzone.js和Flask。对于此问题，您可以将
DROPZONE\u REDIRECT\u VIEW
设置为上载完成时要重定向的视图

Dropzone.js使用AJAX发布数据，这就是为什么它不会将控件返回给视图函数
有两种方法可以在所有文件上载完成时重定向（或渲染模板）

您可以添加一个按钮来重定向

您可以将事件侦听器添加到自动重定向页面（使用jQuery）

如果您正在使用Flask Dropzone，则：

{{ dropzone.config(redirect_url=url_for('endpoint',foo=bar)) }}

complete.html
的内容是什么？它基本上只是通过
render\u template
传递的表的html代码。我已经添加了这个问题。谢谢，回答得很好。我最终添加了一个链接。无法自动渲染？请完成您的问题以获得更好的答案
def upload(): ... # you do not need to read_csv in upload() #upload the file #df = pd.read_csv(destination) #table += df.to_html() return "OK" # simply returning HTTP 200 is enough for dropzone to treat it as successful # return render_template('complete.html', table=table) # add the new upload_complete endpoint # this is for example only, it is not suitable for production use @app.route('/upload-complete') def upload_complete(): target = os.path.join(APP_ROOT, 'uploads/') table="" for file_name in os.listdir(target): df = pd.read_csv(file_name) table += df.to_html() return render_template('complete.html', table=table)

<script> Dropzone.autoDiscover = false; $(function() { var myDropzone = new Dropzone("#my-dropzone"); myDropzone.on("queuecomplete", function(file) { // Called when all files in the queue finish uploading. window.location = "{{ url_for('upload') }}"; }); }) </script>

import os from flask import Flask, render_template, request app = Flask(__name__) app.config['UPLOADED_PATH'] = 'the/path/to/upload' @app.route('/') def index(): # render upload page return render_template('index.html') @app.route('/upload', methods=['GET', 'POST']) def upload(): if request.method == 'POST': for f in request.files.getlist('file'): f.save(os.path.join('the/path/to/upload', f.filename)) return render_template('your template to render')

{{ dropzone.config(redirect_url=url_for('endpoint',foo=bar)) }}