이번에 포스팅할 내용은 비동기방식을 이용하여 ajax 파일업로드를 진행해볼까 합니다.
제가 아는 2가지 방식에 대해서 포스팅을 하도록 하겠습니다.
● FormData() Object를 이용한 방법
● jQuery Form Plugin을 이용한 방법
1차적으로 ajax 파일업로드를 한다면
FormData object를 사용해야 하는데 IE브라우저에서는 10부터 지원이 된다고 합니다.
우선은 FormData object를 스크립트로 생성한 다음 append 하여 jquery의 ajax call을 해주면 되겠는대요
샘플용 코드를 한번 보시도록 하겠습니다.
jQuery는 CDN을 이용하여 진행하였습니다.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
기본적으로 jQuery를 사용할수있는 환경을 위하여 include를 해줍니다.
파일 SUBMIT 테스트를위한 HTML태그를 두가지 방법으로 작성 하겠습니다.
1. FORM태그를 통째로 SUBMIT
<form id="frm" action="/fileupload" method="post"> <input type="file" name="uploadfile" /> <input type="file" name="uploadfile" /> <input type="button" id="uploadbutton" value="클릭" /> </form>
2. key,value로 append하면서 SUBMIT
<input type="file" name="uploadfile" /> <input type="file" name="uploadfile" /> <input type="button" id="uploadbutton" value="파일업로드" />
두가지 방식으로 설명을 드리겠습니다.
1번에 해당되는 코드일경우는 우리가 일반적으로 FORM에 있는 데이터들을 통째로 SUBMIT 하고자 할경우에 사용하는 경우이고
2번에 해당되는 코드는 네이밍을 APPEND 해주는 형식으로 하여 KEY,VALUE 형식으로 넘겨주는 방식입니다.
그렇다면 FORMDATA() 부분에 대한 코드를 보시겠습니다.
1번 코드에 해당 되는 FORMDATA
//폼객체를 불러와서 var form = $('form')[0]; //FormData parameter에 담아줌 var formData = new FormData(form);
2번 코드에 해당되는 key값을 별도로 주는 FormData
var formData = new FormData(); //첫번째 파일태그 formData.append("uploadfile",$("input[name=uploadfile]")[0].files[0]); //두번째 파일태그 formData.append("uploadfile",$("input[name=uploadfile]")[1].files[0]);
위와 같겠습니다.
대~~충 감이 오시죠?
저는 1번 코드기준으로 스크립트를 작성하도록 해보겠습니다.
$(function(){ $("#uploadbutton").click(function(){ var form = $('form')[0]; var formData = new FormData(form); $.ajax({ url: '/fileupload', processData: false, contentType: false, data: formData, type: 'POST', success: function(result){ alert("업로드 성공!!"); } }); }); })
한번 위 코드를 기준으로 실행을 해보도록 하겠습니다.
위와같이 정상적으로 출력이 되었습니다.
이어서 IE10이하 버전에서도 Ajax 파일업로드를 위하여 설명을 진행하도록 하겠습니다.
별도로 IE9이하는 JQUERY 플러그인과 연동하여 비동기 파일업로드를 동작시켜야 합니다.
jQuery Form Plugin인대요
저는 Github에서 플러그인을 다운로드 받도록 하겠습니다.
↓↓↓↓↓↓↓↓↓
https://github.com/malsup/form/
Download ZIP이란 버튼을 클릭해서 다운로드 받습니다.
압축 해제 후 jquery.form.js 파일을 본인의 프로젝트 경로에 맞추어 복사 + 붙여넣기 합니다.
FormData() 에서 작성했던 HTML코드중 첫번째 코드를 이용하여 작업할 것인대
추가로 변경해줘야 할 부분이 BUTTON태그 -> SUBMIT 태그로 변경을 해줍니다.
다음은 스크립트 코드를 보시겠습니다.
$(function(){ //ajax form submit $('#frm').ajaxForm({ beforeSubmit: function (data,form,option) { //validation체크 //막기위해서는 return false를 잡아주면됨 return true; }, success: function(response,status){ //성공후 서버에서 받은 데이터 처리 alert("업로드 성공!!"); }, error: function(){ //에러발생을 위한 code페이지 } }); });
위 코드를 이용하여 결과를 출력해보도록 하겠습니다.
위처럼 서버Console에서 파일정보가 제대로 찍히고
클라이언트 페이지에서도 success 쪽으로 호출이 잘되네요
지금까지 비동기 파일업로드에 대하여 2가지 방식에 대하여 설명하였습니다.
by 개발로짜
jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기 (0) | 2014.10.25 |
---|---|
jQuery Validation 플러그인을 이용하여 손쉽게 검증하기 (1) | 2014.10.22 |
jQuery blockUI 플러그인을 이용하여 레이어팝업(모달) 만들기 (2) | 2014.10.21 |
jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기 (0) | 2014.10.15 |
jQuery jqPlot를 사용하여 선형,원형(파이형),막대형 그래프 생성하기 (9) | 2014.10.15 |