Как загрузить файл, используя вызов ajax в колбе

Привет, я новичок в фляге, и я хочу загрузить файл, используя вызов 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']

Буду признателен, если кто-нибудь сможет помочь. Заранее благодарю

Ответы

Ответ 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>

JavaScript:

$(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,
            async: false,
            success: function(data) {
                console.log('Success!');
            },
        });
    });
});

Теперь в вашей функции просмотра конечной точки флажка вы можете получить доступ к данным файла через файл flask.request.files.

На боковой ноте формы не являются табличными данными, поэтому они не входят в таблицу. Вместо этого вы должны прибегнуть к неупорядоченному списку или списку определений.

Ответ 2

Здесь он находится в учебнике.

from flask import send_from_directory

@app.route('/uploads/')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],
                               filename)

Вы можете вернуть то же самое к запросу POST. И тогда функция успеха AJAX может использоваться для отображения ответа.

Но для любой практической цели было бы неплохо сохранить имя файла с его связанным ресурсом в таблице отношений базы данных.