Dropzone.js阻止Flask呈现模板 [英] Dropzone.js prevents Flask from rendering template
问题描述
我正在使用 Dropzone.js 来允许通过<$ c $拖放 CSV 文件的上传c> Flask 网站。上传过程非常有效。我将上传的文件保存到指定的文件夹，然后可以使用 df.to_html（）将数据框转换为 HTML 代码，然后我将其传递给我的模板。它到达代码中的那一点，但它不呈现模板并且不会抛出任何错误。所以我的问题是为什么 Dropzone.js 阻止渲染发生？
I am using Dropzone.js to allow drag and drop upload of CSV files via a Flask web site. The upload process works great. I save the uploaded file to my specified folder and can then use df.to_html() to convert the dataframe into HTML code, which I then pass to my template. It gets to that point in the code, but it doesn't render the template and no errors are thrown. So my question is why is Dropzone.js preventing the render from happening?
我还试过从表中返回 HTML 代码，而不是使用 render_template ，但这也不起作用。
I have also tried just return the HTML code from the table and not using render_template, but this also does not work.
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
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>
编辑
以下是我上传的示例 csv 数据：
Here is the sample csv data I am uploading:
Person,Count
A,10
B,12
C,13
Complete.html
Complete.html
<html>
<body>
{{table | safe }}
</body>
</html>
推荐答案
更新现在你可以使用 Flask-Dropzone ，这是一个Flask扩展，它将Dropzone.js与Flask集成在一起。对于此问题，您可以将 DROPZONE_REDIRECT_VIEW 设置为要在上传完成时重定向的视图。
Update: Now you can use Flask-Dropzone, a Flask extension that integrates Dropzone.js with Flask. For this issue, you can set DROPZONE_REDIRECT_VIEW to the view you want to redirect when uploading complete.
Dropzone.js使用AJAX发布数据，这就是为什么它不会回馈控制你的视图功能。
Dropzone.js use AJAX to post data, that's why it will not give back the control to your view function.
当所有文件完全上传时，有两种方法可以重定向（或渲染模板）。
There are two methods to redirect (or render template) when all files were complete uploading.
-
您可以添加一个按钮进行重定向。
You can add a button to redirect.
< a href ={{url_for（'upload' }}}>上传完成< / a>
您可以将事件监听器添加到自动重定向页面（使用jQuery） ）。
You can add an event listener to automatic redirect page (use jQuery).
<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>
在视图功能中，添加 if 语句检查HTTP方法是否 POST ：
In view function, add an if statement to check whether the HTTP method was POST:
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.js阻止Flask呈现模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
