Python 如何在flask中使用ajax调用上载文件

嗨，我对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>

我不知道如何从这里获得上传的文件（不是名称）

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

如果有人能帮忙，我将不胜感激。提前谢谢你

它就在那里

从flask导入从\u目录发送\u @app.route（“/uploads/”） def上传文件（文件名）： 从_目录返回发送_（app.config['UPLOAD_FOLDER']， 文件名） 您可以将其返回到POST请求。然后可以使用AJAX success函数来显示响应

---

但出于任何实际目的，最好将文件名及其相关资源保存在数据库关系表中。

要回答您的问题

HTML:

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

---

另一方面，表单不是表格数据，因此它们不属于表格。相反，你应该求助于无序列表或定义列表。

你可以看看这篇文章，它建议使用flask sijax来处理，你能解释一下代码吗：new FormData（$（“#upload file”）[0]；“0”是什么意思？使用Firebug，或者使用任何开发人员工具打开浏览器控制台。现在，在您的JavaScript文件中：console.log（$（“#upload file”）；-如您所见，它返回一个对象。后缀为“[0]”将选择对象中的第一项。FormData（）创建一个新的FormData对象，该对象是需要发送到服务器的对象。我确认这应该是可接受的答案。工作很有魅力！：）谢谢@onosendi！至于您的旁注：不幸的是，给定CSS current state（），使用表将输入字段彼此对齐仍然比使用其他技术容易一个数量级。（）它似乎只是CSS2和3规范中缺少的一个用例——或者是它，或者是表确实是需要的。@onosendi试图用一些AJAX来使用你的答案，你知道我在这里做错了什么吗？提前谢谢你！

    in the  Javascript side::::        

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

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



in the server side::::


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

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

<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!');
            },
        });
    });
});

    in the  Javascript side::::        

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

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



in the server side::::


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