ajax로 파일업로드하기

굉장히 심플한  코드를 알려준 멋진 블로그가 있다 

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax

여기를 보고 따라하면 금방 쉽게할수 있는데....

문제는 jquery 버전이다.

난 1.4.2버전을 쓰고있었는데 이런 하위버전은 먹지 않는다는 것.

1.7.1로 바꿔주었더니 잘된다 아주...ㅠㅠ 이런 삽질은 이제 디폴트.

-----------------------------------

별로 필요없지만... 본문해석 및 편의를 위해 소스도 좀 살짝 고침

-----------------------------------

제목 : jQuery와 ajax를 이용한 multipart/form-data전송

글쓴이 : d.cochran 

작성일 : Wed, 08/14/2013 - 08:04 

내용 : 

ajax와 multipart/form-data를 이용하여 파일전송이 가능합니다. 이를 복잡하게 구현한 많은 사이트들이 존재하지만 사실은 쉽습니다. 이 방법은 약간의 jquery ajax 과정과 FormData()함수를 이용하여 폼데이터들을 가져오는 것을 요구합니다.

다음 방법을 이용하면 당신은 하나 이상의 다중 파일업로드를 할 수 있어요.

일단 폼을 봅시다.

<form method="post" name="frmReview" id="frmReview"> 블로그주소 <input type="text" maxlength="256" id="blog_url" name="blog_url" style="width:400px;" value="http://3mhappyhouse.blog.me/30185320565"/> 대표사진 <input type="file" id="thumb_img" name="thumb_img" /> <input type="submit" value="작성하기"> </form>

위의 폼은 히든필드, username필드 그리고 이미지파일업로드 필드를 가지고 있습니다. 우리의 php페이지에서 처리하도록 전송할겁니다.

자 이제  jQuery와 ajax를 이용한 script부분을 보시죵

$("form#frmReview").submit(function(event){ //disable the default form submission event.preventDefault(); var fd = new FormData($(this)[0]); $.ajax({ url: "action.php", type: "POST", data: fd, async: false, cache: false, contentType: false, processData: false, success: function(data){ alert(data); /* alert(data); if json obj. alert(JSON.stringify(data));*/ } }); return false; });

마지막으로 php에서 처리하는 부분입니다.

/* 파일업로드 */ $img_id = $g4[server_time]; //thumbnail저장 $thumbnail = $_FILES[thumb_img][name]; $thumb_ext = end(explode('.', $thumbnail)); $thumb_savename = $img_id."_thumb.".$thumb_ext; if ($thumbnail) upload_file($_FILES[thumb_img][tmp_name], $thumb_savename, "$g4[path]/data/recipe/review"); $blog_url = $_POST['blog_url'];

사족을 붙이자면

원글에서는 Profile Image: <input name="profileImg[]" type="file" />이렇게 필드이름뒤에 []를 붙였는데 굳이 붙일 필요는 없다는 것이 나의 결론. 괜히 배열이 되어 귀찮다. 그러나 혹시 나중에 동적으로 추가가되는 기능이 구현된다면 필요할지도?