포럼
파일 ajax로 post로 파일 업로드 후 json으로 요청결과 받는 방법 문의
2012.07.16 00:47
ajax로 폼 데이터를 post로 파일역시 본문에 포함시켜서 전송시키는데 응답이 html 마크업이 오네요.
요청은 이런식으로 해서 jquery 폼 플러그인을 사용해서 post로 요청 보낼때 본문에 파일까지 포함시킵니다.
<form id='uploadFile' action="/animal/" method="post" enctype='multipart/form-data' >
<input type='hidden' name='module' value='file' />
<input type='hidden' name='act' value='procFileUploadWithoutEditor' />
<input type='hidden' name='upload_target_srl' value='106' />
<input type='hidden' name='manual_insert' value='true' />
<input type='file' name='Filedata' value='' />
<input type='submit' value='전송' />
</form>
요청은 에디터에서 보내는게 아니라서 에디터 정보를 뺀 업로드 모듈을 하나 추가 했습니다.
procFileUpload에서 에디트 시퀸스 부분만 지우고 따로 뺀 함수인데요
firephp로 로그를 찍어보면 마지막에 insertFile 메서드 실행해서 업로드는 됩니다.
파일목록을 불러오는 결과값도 업로드 된 파일이 리스트에 포함되서 옵니다.
문제는 결과값이 성공여부를 담은 json으로 받아야 되는데 결과값은 엉뚱한 마크업이 옵니다.
요청 헤더는 application/json으로 보내는데 결과값은 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- META -->
<meta charset="UTF-8"/>
<meta name="module" content="file" />
<meta http-equiv="imagetoolbar" content="no" />
<title></title>
<link rel="stylesheet" href="/animal/common/css/xe.css" type="text/css" charset="UTF-8" media="all"
/>
<link rel="stylesheet" href="/animal/common/js/plugins/ui/jquery-ui.css" type="text/css" charset
="UTF-8" media="all" />
<script type="text/javascript" src="/animal/common/js/jquery.js?20120503144344"></script>
<script type="text/javascript" src="/animal/common/js/x.js?20111124090210"></script>
<script type="text/javascript" src="/animal/common/js/common.js?20120503144344"></script>
<script type="text/javascript" src="/animal/common/js/js_app.js?20111124090210"></script>
<script type="text/javascript" src="/animal/common/js/xml_handler.js?20120116144006"></script>
<script type="text/javascript" src="/animal/common/js/xml_js_filter.js?20120426181728"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/animal/common/js/html5.js"></script><![endif]-->
<link rel="shortcut icon" href="./modules/admin/tpl/img/faviconSample.png" /><link rel="apple-touch-icon"
href="./modules/admin/tpl/img/mobiconSample.png" />
<script type="text/javascript">//<![CDATA[
var current_url = "http://localhost/animal/";
var request_uri = "http://localhost/animal/";
var current_mid = "";
var waiting_message = "서버에 요청 중입니다. 잠시만 기다려주세요.";
var ssl_actions = new Array();
var default_url = "http://localhost/animal/";
var http_port = 80; var https_port = 80;
//]]></script>
</head>
<body>
<script>
//<![CDATA[
var current_url = "http://localhost/animal/";
var request_uri = "http://localhost/animal/";
var current_mid = "";
var waiting_message = "서버에 요청 중입니다. 잠시만 기다려주세요.";
var ssl_actions = new Array();
var default_url = "http://localhost/animal/";
var http_port = 80;var https_port = 80; //]]>
</script>
<!-- ETC -->
<div class="wfsr"></div>
<script src="/animal/addons/autolink/autolink.js?20111124090210"></script>
<script src="/animal/common/js/plugins/ui/jquery-ui.min.js?20120503144344"></script>
<script src="/animal/common/js/plugins/ui/jquery.ui.datepicker-ko.js?20120116144006"></script>
<script src="/animal/addons/resize_image/js/resize_image.min.js?20111124090210"></script>
</body>
</html>
어떻게 해야하는지 의견을 듣고 싶습니다. 감사합니다.
댓글 5
-
퍼니엑스이
2012.07.16 19:13
-
HoDong
2012.07.16 21:54
음.. 방법이 없을까요? 모바일하고 연동하려고 하는데요. 어느부분을 보면 알수 있을거라는 힌트라도 더 주셨음 좋겠네요.
파일 업로드 모듈은 살펴 봤는데 딱히 어떻게 해야될지 잘 모르겠네요;;
-
Xiso
2012.07.19 12:23
저같은경우, exec_xml로 데이터를 보내고, 해당 act의 function 안에서 object 데이터를 만들어
return $this->setMessage(json_encode($object));
해준뒤에, exec_xml의 콜백함수에 function collback(ret_obj){ var json_object = ret_obj['message'] }
형태로 사용합니다... 꼼수죠.
-
Xiso
2012.07.19 12:26
ajax로 파일전송보단 (ajaxSubmit 으로 비동기전송이 가능하다곤 합니다만.. ), xe에선 hidden_iframe을 사용하시길 권장합니다.
별도의 플러그인도필요없고, iframe 내에서 처리되는act가 top_refresh되게끔 templatefile을 set 해주시면 ajax처럼 동작합니다.
파일업로드 모듈은, 플래시업로더를 이용하기때문에 가능하다지만;
모바일에서 사용하실거라면 그게아니겠지요.
-
난다날아
2012.07.19 19:01
json으로 응답을 받으시려면 해당 메소드에서 Context::setRequestMethod('JSON'); 해주시면 됩니다.
JSON으로 요청을 보냈다면 응답도 JSON으로 와야하는게 맞습니다.
XE 코드를 살펴보니 JSON 헤더를 포함하더라도 POST 방식으로 요청을 보내면 JSON으로 인식하지 않도록 되어있네요.