如何使用烧瓶中的ajax调用上传文件

Question

嗨，我对 Flask 很陌生，我想使用对服务器的 ajax 调用上传文件。如文档中所述，我将文件上传添加到 html，如下所示：

 <form action="" method=post enctype="multipart/form-data" id="testid">
 <table>
  <tr>
   <td>
     <label>Upload</label>
   </td>
   <td>
     <input id="upload_content_id" type="file" name="upload_file" multiple>
     <input type="button" name="btn_uplpad" id="btn_upload_id" class="btn-upload" value="Upload"/>

   </td>
  </tr>
 </table>
</form>

我这样写了ajax处理程序

$(document).ready(function() {
    $("#btn_upload_id" ).click(function() {
        $.ajax({
            type : "POST",
            url : "/uploadajax",
            cache: false,
            async: false,
            success : function (data) {},
            error: function (XMLHttpRequest, textStatus, errorThrown) {}
        });
    });
});

我不知道如何从中获取上传的文件（不是名称）

   <input id="upload_content_id" type="file" name="upload_file" multiple>

并将文件保存在文件夹中。我不太确定如何从我编写的处理程序中读取文件：

 @app.route('/uploadajax', methods = ['POST'])
def upldfile():
    if request.method == 'POST':
        file_val = request.files['file']

如果有人能提供帮助，我将不胜感激。先感谢您

原文由 0x12 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要回答你的问题…

HTML:

 <form id="upload-file" method="post" enctype="multipart/form-data">
    <fieldset>
        <label for="file">Select a file</label>
        <input name="file" type="file">
    </fieldset>
    <fieldset>
        <button id="upload-file-btn" type="button">Upload</button>
    </fieldset>
</form>

脚本：

 $(function() {
    $('#upload-file-btn').click(function() {
        var form_data = new FormData($('#upload-file')[0]);
        $.ajax({
            type: 'POST',
            url: '/uploadajax',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log('Success!');
            },
        });
    });
});

现在在你的 flask 的端点视图函数中，你可以通过 flask.request.files 访问文件的数据。

附带说明一下，表单不是表格数据，因此它们不属于表格。相反，您应该求助于无序列表或定义列表。

原文由 user2709610 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

JavaScript（客户端）：

 var form_data = new FormData();
form_data.append('file', $('#uploadfile').prop('files')[0]);

$.ajax({
    type: 'POST',
    url: '/uploadLabel',
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
        console.log('Success!');
    },
});

Python（服务器端）：

 @app.route('/uploadLabel', methods=['GET', 'POST'])
def uploadLabel():
    isthisFile = request.files.get('file')
    print(isthisFile)
    print(isthisFile.filename)
    isthisFile.save('./' + isthisFile.filename)

原文由 Stackoverflow 发布，翻译遵循 CC BY-SA 4.0 许可协议