Dropzone.js防止Flask渲染模板

我正在使用Dropzone.js允許通過Flask網站拖放上傳CSV文件。上傳過程很好。我將上傳的文件保存到指定的文件夾中，然後可以使用df.to_html()將dataframe轉換爲HTML代碼，然後將其傳遞給我的模板。它到達代碼中的那一點，但它不會呈現模板，也不會引發錯誤。所以我的問題是爲什麼Dropzone.js阻止渲染髮生？Dropzone.js防止Flask渲染模板

我也試過只是從表中返回HTML代碼而不是使用render_template，但這也行不通。

初始化的.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>

編輯

這裏是樣本csv數據我上傳：

Person,Count 
A,10 
B,12 
C,13

Complete.html

<html> 

<body> 

{{table | safe }} 

</body> 
</html>

來源

2017-02-07 user2242044

你return語句是在for循環中，只有循環的第一次迭代將在返回之前運行。你爲什麼認爲Dropzone.js在做什麼？ JavaScript在客戶端上運行，Flask和Jinja分別在服務器上運行。 – davidism

@davidism。你對於「for循環」的內容是正確的。我通過撤回解決了這個問題，但仍然有同樣的問題。我不確定它是否是'dropzone.js'，但我相信這是由於淘汰的過程。如果我複製該路線並通過從我的硬盤讀取'csv'文件來加載'html'，它可以正常工作。 – user2242044

'complete.html'的內容是什麼？ – HassenPy

Dropzone.js使用AJAX發佈數據，這就是爲什麼它會不給退控制你的視圖功能。

當所有文件完成上傳時，有兩種重定向（或渲染模板）的方法。

您可以添加一個按鈕來重定向。

<a href="{{ url_for('upload') }}">Upload Complete</a>

您可以添加事件偵聽器，自動重定向頁面（使用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：

import os 
from flask import Flask, render_template, request 

app = Flask(__name__) 
app.config['UPLOADED_PATH'] = os.getcwd() + '/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(app.config['UPLOADED_PATH'], f.filename)) 
    return render_template('your template to render')

來源

2017-02-16 04:06:53

您的代碼做工作。你的模板將被渲染並返回。

Dropzone將上傳拖放到瀏覽器中的文件。 它將消耗服務器的響應，並保留頁面，原因是。它使用服務器的響應來確定上傳是否成功。

要看到這個動作：

導航到你的頁面
打開你喜歡的瀏覽器開發工具; （在Firefox中按CTRL + SHIFT + K）
選擇網絡選項卡
將您的CSV到懸浮窗窗格並注意請求顯示在開發工具網絡表

這裏是一個截屏從我的瀏覽器。我從你的問題中複製了你的代碼。

要真正看到渲染complete.html你將需要添加另一個瓶中端點和有辦法來瀏覽到。

例如：在upload1.html添加：

在 init.py變化，並添加

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

：

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)

來源

2017-02-11 03:25:07

謝謝，很好的答案。我確實最終添加了一個鏈接。沒有辦法必須自動渲染？ – user2242044

Dropzone.js防止Flask渲染模板

回答

相關問題