从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？

回答

相关问题