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-¶õ |