需要帮助理解Python Flask、w/和w/o Javascript+Ajax中的文件上载吗

我正在编写一个webapp，允许用户上传照片，然后将这些照片的数据返回到前端以触发一些活动

我是从网上找到的教程/指南开始的

然而，我非常惊讶地发现，在没有javascript的情况下，这是可行的。我不明白按下按钮是如何发送一个弹出窗口请求选择文件的请求的。它怎么知道这个按钮是用来上传文件的？在HTML中，我没有给它一个明显的属性，告诉它上传文件，在python/Flask中，我也没有选择用于上传的按钮

令我惊讶的是，我还注意到，在给出的示例中，必须调用/上传路由才能工作。同样，我看不出这些定义在哪里，也看不到我可以在哪里修改它。该链接上的演示使用的唯一文件是app.py和index.html。运行Web服务器似乎不需要setup.py文件

随着我的webapp的发展，我尝试添加一个javascript文件，该文件将从/uploads路径获取响应并显示在前端，但很快就遇到了麻烦。似乎我只能从任何神秘力量运行/上传它。我的javascript无法访问它，因此我无法将响应转换为JS，以便以我想要的方式在前端显示它

有人能帮我理解链接中的文件上传服务器是如何工作的，这样我就可以修改它来使用JavaScript了吗

请注意，我的webapp基本上只是链接中的程序，对上传的文件进行了大量分析。就webapp的工作方式而言，我所做的唯一更改是，它应该返回一个包含该文件信息的字符串，而不是将您重定向到上传的文件

我觉得不值得发布太多python和HTML代码，因为所有重要的内容都在该链接中，但javascript文件在下面

    "use strict";

var main = function() {
    console.log("i am functioning!")

    var show_similar_img = function(){
        //Read megastatus
        $.ajax({
                method: "GET",
                url: "/upload",
                // contentType: 'application/json',
                dataType: "string"
        })
        .done(function(media_info){
            console.log(media_info)
        });
    }

    $("#upload-btn").on("click",function(){
        console.log("button pressed!")
        show_similar_img()
    })
}

console.log("i am being run!")
$(document).ready(main);

元素的“类型”属性为“文件”，这是浏览器通过打开弹出式模式窗口（提示用户选择文件），了解如何以您所注意到的特定方式处理元素的方式

路由必须称为upload，因为元素的action属性值也称为upload。如果还更改了窗体的操作，则可以更改路由的名称

事实上，由于文件API，您可以使用JavaScript访问与输入元素关联的文件的文件信息。Mozilla开发者网络有一个很好的指南：

关于您的实际实现：首先，您还需要防止表单提交以“常规”同步方式处理，因此您需要在事件上调用preventDefault：

$("#upload-btn").on("click",function(event) {
    event.preventDefault();
    console.log("button pressed!")
    show_similar_img()
 })

其次，我假设您希望将文件发送到在Python/Flask上运行的服务器，因此您希望AJAX请求是POST而不是GET。因此，您需要修改show_simular_img，以POST形式发送请求，并使用上述文件API将该文件包含在请求的数据中。大概是这样的：

var show_similar_img = function(){
    var formData = new FormData();
    var file = $("input[type='file']")[0].files[0];
    formData.append("file", file);

    $.ajax({
        url : "/upload",
        type : "POST",
        data : formData,
        contentType: false,
        processData: false
    })
    .done(function(media_info){
        console.log(media_info)
    });

}

编辑——我应该补充一点，我并不真正熟悉Flask或其请求对象的复杂性。我假设，无论该文件是作为表单提交还是异步请求的一部分上载，它仍然可以在request.files['file']中访问，但Flask可能不会在request.files字典中提供异步上载的文件。不过，我非常确信，该文件可以在请求对象的某个位置访问，因此您可能需要参考Flask文档。您还可以使用pdb在服务器端代码中添加断点，并检查请求对象以查看它包含的内容和位置