flask15 use AJAX upload file

AJAX (Asynchronous Javascript And XML)·Î ÆÄÀÏÀ» ¾÷·Îµå ¹æ¹ý¿¡ ´ëÇؼ­ ¾Ë¾Æ º¸ÀÚ.

btn-uploadFile ¹öÆ°À» ´©¸£¸é myfile¿¡ ¼³Á¤µÈ ÆÄÀÏÀ» ¼­¹ö·Î º¸³½´Ù.

html ÄÚµå
<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="myfile" accept=".png, .jpg">
    <input type="button" id="btn-uploadFile" value="ajax ÆÄÀÏ ¾÷·Îµå">
</form>
<p></p>
<hr>
<p></p>
<div id="response_result" style="border:3px solid red; padding:10px; width : 800px; background-color: #f5f5f5;">
    ¼­¹öÀÇ ÀÀ´ä Ç¥½Ã
</div>


$("#btn-uploadFile").on("click", function () {
    ajax_upload_file();
});

javascript ÄÚµå
function ajax_upload_file() {
    var URI = "/main/upload_file"

    var form = $('#uploadForm')[0];
    var data = new FormData(form);

    $.ajax({
        type: "POST",
        url: URI,

        contentType: false,
        processData: false,
        dataType: 'json',
        data: data,
        enctype: 'multipart/form-data',

        cache: false,
        async: true,
        timeout: 30000,

        success: function(objs, textStatus, jqXHR){
            alert("ajax ±â¹Ý ÆÄÀÏ ¾÷·Îµå Åë½Å ¼º°ø");
            console.log("objs=", objs);

            var data_json_object = JSON.stringify(objs);
            console.log("JSON ½ºÆ®¸µ="+data_json_object);

            $("#response_result").text("ajax_upload_file : " + data_json_object);
        },
        error: function (request, status, error){
            console.log(request, status, error);
            alert(error);
        }
    });
} // ajax_upload_file

jquery-ajax-post ¹æ½ÄÀ¸·Î ÆÄÀ̽ã Çöó½ºÅ©¿¡ ÆÄÀÏ ¾÷·Îµå¸¦ ÇÒ¶§ Çʼö·Î ÁöÁ¤ÇØ¾ß ÇҰ͵éÀÌ´Ù.

contentType: false
processData: false
data: html Æû µ¥ÀÌÅÍ
enctype: 'multipart/form-data'

"multipart/form-data"´Â ¸ðµç ¹®ÀÚ¸¦ ÀÎÄÚµùÇÏÁö ¾ÊÀ½À» ³ªÅ¸³½´Ù. ÆÄÀÏÀ̳ª À̹ÌÁö¸¦ Àü¼ÛÇÒ¶§ »ç¿ë µÈ´Ù.


ÆÄÀ̽ã ÄÚµå
@bp.route('/upload_file', methods=['POST'])
def upload_file():
    print('Request URL: http://127.0.0.1:8888/main/upload_file')

    img_file = request.files.get('myfile')

    # upload_path ÁöÁ¤
    root_path = os.getcwd()
    print(f"rootPath={root_path}")
    upload_path = root_path + f'/uploadfile'
    print(f"upload_path={upload_path}")

    if not os.path.exists(upload_path):
        os.mkdir(upload_path)

    # ÇöÀç ½Ã°£À¸·Î save_directory ÁöÁ¤
    now = datetime.datetime.now()
    today = now.strftime('%Y-%m-%d')
    print(f"ÇöÀç½Ã°¢(³â-¿ù-ÀÏ) = {today}")
    save_directory = f'{upload_path}/{today}'

    if not os.path.exists(save_directory):
        os.mkdir(save_directory)

    # À̹ÌÁö ÀúÀå
    img_file.save(save_directory + '/' + img_file.filename)
    print(f"ÆÄÀÏ ÀúÀå : {save_directory + '/' + img_file.filename}")

    # ÀÀ´ä°ª ÁöÁ¤
    response_info = {'filename': img_file.filename}
    response = json.dumps([response_info], default=str, ensure_ascii=False)

    return response, 201

Çöó½ºÅ© ¼­¹ö¿¡¼­ ÆÄÀÏ °´Ã¼¸¦ ÀÐ¾î ¿Ã¶§´Â request.files.get('myfile') ÇÔ¼ö¸¦ »ç¿ëÇÑ´Ù.
'myfile'Àº html ÆûÀÇ input fileÀÇ nameÀÌ´Ù.

img_file.save ÇÔ¼ö·Î ¼­¹ö¿¡ ÆÄÀÏ·Î ÀúÀåÇÑ´Ù.

´Ù¿î·Îµå:
/templates/test.html
controller/main_controller.py

ajax_test.zip

Âü°í)
[spring] ajax ¸ÖƼÆÄÀÏ(MultipartFile) ¾÷·Îµå ó¸®
https://cheonfamily.tistory.com/6

multipart/form-data¿¡ ´ëÇؼ­
https://velog.io/@shin6403/HTTP-multipartform-data-¶õ