從Python（Flask）發送數據到Javascript？

我想在我的網站上實現一個拖放文件上傳器。文件在被刪除後立即上傳，我想要生成一個帶預覽的彈出窗口的URL。我正在使用dropzone.js。在dropzone的文檔中，提供了一個樣本作爲從服務器發回數據以便在文件上傳後顯示的指南。 https://github.com/enyo/dropzone/wiki/FAQ#i-want-to-display-additional-information-after-a-file-uploaded 從Python（Flask）發送數據到Javascript？

然而，當我嘗試在我的神社模板創建的懸浮窗內嵌Javascript來使用url_for，我取回一個鏈接，看起來像/％7Bfilename％7D 只是可以肯定我突然出現一個快速的打印聲明在那裏的URL，它出現在控制檯罰款。

我在python上傳：

def upload_file(): 
if request.method == 'POST': 
    file = request.files['file'] 
    if file and allowed_file(file.filename): 
     filename = secure_filename(file.filename) 
     if is_image(file.filename): # generates a shortened UUID name for the image 
      filename = shortuuid.uuid()[:7] + "." + file.filename.rsplit(".", 1)[1] 
      file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) 

@app.route ('/<filename>') 
def uploaded_image(filename): 
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

，並在我的index.html模板內聯JS：

<script> 
var mydropzone = new Dropzone(document.body, { 
    url: "{{url_for('upload_file')}}", 
    previewsContainer: "#previews", 
    clickable: "#clickable", 
    init: function() { 
    this.on("success", function(file, responseText) { 
     var responseText = " {{ url_for('uploaded_image', filename='{filename}')}} "; 
     var span = document.createElement('span'); 
     span.setAttribute("style", "position: absolute; bottom: -50px; left: 3px; height: 28px; line-height: 28px; ") 
     span.innerHTML = responseText; 
     file.previewTemplate.appendChild(span); 

    }); 
} 


});

我在這裏缺少一些基本的東西？我是否需要使用諸如JSON/Ajax之類的東西（從來不用這些東西，但Google一直提供這些東西），因爲URL是從服務器發回的數據？

來源

2014-01-29 Lucifer N.

這樣做的任何指導原則？從哪裏開始？謝謝。 –

簡單：

返回的文件路徑到客戶端：

def upload_file(): 
    if request.method == 'POST': 
     # ... snip ... 
     return url_for('uploaded_image', filename=filename)

在on('success')功能刪除var responseText行，因爲你會得到的URL回的響應。

來源

2014-01-29 19:06:58

作品！謝謝 –

如果它的工作，請接受他人看到並學習的答案 – codegeek

你非常接近它，但你必須通過JSON發送URL。

問題是，當頁面首次加載時（在Jinja模板中），在URL實際可用之前，您可以撥打url_for('uploaded_image')。它認爲你正在尋找一個名爲{filename}的文件的URL。

嘗試返回從POST請求具有新的URL的JSON響應：

return jsonify({'fileURL':url_for('uploaded_image', filename=filename)})

從那裏，你可以做任何你會用JS喜歡。你有什麼應該工作，只需從responseText獲得URL。

編輯：固定回報。

來源

2014-01-29 19:06:14 joehand

我的POST請求意味着我的python中的upload_file函數？我怎麼能在JS中捕捉到它來顯示它？ –

是的，正如其他答案所述，將'return'添加到'def upload_file（）：'的底部。你已經在JS中捕獲它，它將在成功函數中返回。嘗試添加'console.log（file，responseText）'作爲this.on（「success」，function（file，responseText）{}）''的第一行。這會告訴你什麼是從燒瓶返回。 – joehand

試過了，jsonify掉了一個錯誤：文件「/usr/lib/python3.3/site-packages/flask/json.py」，第237行，在jsonify中 return current_app。response_class（dict（* args，** kwargs）， ValueError：字典更新順序元素＃0長度爲1; 2是必需的 –

從Python（Flask）發送數據到Javascript？

回答

相關問題