当前位置: 首页 > 知识库问答 >
问题:

将数据从Python(Flask)发送到JavaScript?

仇承志
2023-03-14

我正在尝试在我的网站上实现一个拖放文件上传器。文件被删除后立即上传,我想生成一个URL与flask将弹出在预览。我正在使用Dropzone.js。在dropzone的文档中,提供了一个示例,作为将数据从服务器发回并在文件上载后显示的指南。https://github.com/enyo/dropzone/wiki/faq#i-want-to-display-additution-information-after-a-file-uploaded

然而,当我试图在创建dropzone的Jinja模板中的内联Javascript中使用url_for时,我会返回一个类似/%7bFileName%7d的链接,以确保在其中弹出了URL的快速打印语句,并且在html" target="_blank">控制台中显示良好。

我的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);

    });
}


});

null

我是不是错过了一些基本的东西?我是否需要使用类似于JSON/Ajax的东西(从来没有使用过这些东西,但Googling总是将它们带出来),因为URL是从服务器发回的数据?

共有2个答案

充修能
2023-03-14

您已经非常接近获得它了,但是您将不得不通过JSON发送URL。

问题是在页面首次加载时(在Jinja模板中)调用url_for('uploaded_image'),而URL实际上是可用的。它认为您正在请求一个名为{filename}的文件的url。

尝试从您的POST请求返回一个JSON响应,该响应具有新的URL:

返回jsonify({'file url':url_for('uploaded_image',filename=filename)})

从那里,你可以用js做任何你想做的事情。您所拥有的应该可以工作,只需从responseText获取URL即可。

编辑:固定返回。

颛孙英才
2023-03-14

简单地说:

>

  • 将文件路径返回给客户端:

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

    删除on('success')函数中的var responseText行,因为您将在响应中返回URL。

  •  类似资料:
    • 问题内容: 我正在使用Flask创建一个网站,并且希望能够使用页面中的数据执行python代码。我知道我可以简单地使用表单,但是它是一个页面,它在接收用户输入时会不断更新,并且每次发生任何事情时都要重新加载页面,这是一个很大的麻烦。我知道我可以在javascript内执行操作,但是如何使用js变量在javascript内执行操作?到目前为止,我唯一能想到的就是用js更新外部数据库(如MongoDB

    • 问题内容: 我想知道是否有一种方法可以从HTML的文本框中获取内容,将其输入flask,然后使用Python解析该数据。我以为这可能涉及一些JS,但我可能是错的。有任何想法吗? 问题答案: 除非你想做更复杂的事情,否则将数据从HTML表单输入Flask非常简单。 创建一个接受POST请求()的视图。 访问字典中的表单元素。

    • 问题内容: 我的Python脚本中有以下代码: 另外,我在init.html中有一个HTML表单: 当用户在python脚本中的变量上单击“ spotButton”时,如何传递来自“ projectFilepath”的用户输入? 我是Python和Flask的新手,所以如果我犯任何错误,请原谅我。 问题答案: 该标记需要两个属性进行设置: :表单数据在提交时发送到的URL。用生成它。如果相同的UR

    • 我的Python脚本中有以下代码: 另外,我在init.HTML中有一个HTML表单: 当用户在我的python脚本中的变量上单击“SpotButton”时,我如何传递来自“ProjectFilePath”的用户输入? 我对Python和Flask是个新手,所以如果我有任何错误请原谅。

    • 问题内容: 我有这个小点击计数器。我想将每次单击都包含在mysql表中。有人可以帮忙吗? 万一有人想看看我做了什么: 这是phpfile.php,出于测试目的,将数据写入txt文件 问题答案: 您的问题中定义的JavaScript不能直接与MySql一起使用。这是因为它不在同一台计算机上运行。 JavaScript在客户端(在浏览器中)运行,并且数据库通常在服务器端存在。您可能需要使用中间服务器端

    • 问题内容: 如何将JSON数据从浏览器中的Javascript发送到服务器,并由PHP在其中进行解析? 问题答案: 我在这里获得了很多信息,所以我想发布我发现的解决方案。 问题: 从浏览器上的Javascript获取JSON数据到服务器,然后让PHP成功解析它。 环境: Windows上的浏览器(Firefox)中的Javascript。LAMP服务器作为远程服务器:Ubuntu上的PHP 5.3